jQuery学习笔记——jqGrid的使⽤记录（实现分页、搜索
功能）
jqGrid 是⼀个⽤来显⽰⽹格数据的jQuery插件，通过使⽤jqGrid可以轻松实现前端页⾯与后台数据的ajax异步通信。
⼀、要引⽤的⽂件
要使⽤jqGrid，⾸先页⾯上要引⼊如下css与js⽂件。
1、css
<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
2、js
<script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script>
<script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>
⼆、使⽤要点说明
1、获取值
（1）、获取单个id
获取⾏号，有这种⽅式：
var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");
但是经过实际验证，这种⽅式不可⾏，当选中⾏，再点击同⼀⾏会出现获取不到⾏号的情况。
最后先在js最外部定义⼀个变量selId，然后使⽤如下代码在选中⾏时赋值：
onSelectRow: function (rowid, status) {
selId = rowid; //给最外层的selId赋值
}
（2）、获取多个选中⾏的id
var ids=$('#gridTable').jqGrid('getGridParam','selarrrow');
其输出格式是逗号分隔的id，如：
1,2,3,4,5
（3）、获得所有⾏的ID数组
var ids = $("jqgridtableid").jqGrid('getDataIDs');
（4）、获取⾏数据
如果想获取选择的⾏的数据，只要传⼊rowId即可，如下：
var rowData = $('#gridTable').jqGrid('getRowData',rowId);
⽽这个rowData是⼀个对象，如果要获取选择的⾏的这个对象的属性值，如name的值，需如下：
var Name= rowData.name;
（5）、获取单元格数据
var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);
（6）、设定⾏选中
//设定选中⾏，可设定多⾏选中：
$("jqgridtableid").jqGrid('setSelection',id1);
$("jqgridtableid").jqGrid('setSelection',id2);
2、⾃定义分页、数据交互
何谓⾃定义？就是允许你⽤你⾃⼰喜欢的js对象与后端做数据交互。如jsonReader。
如果这个地⽅的Id设置错了，那么jqGrid就会⾃动以⾏号作为Id，这样会影响删除的。如果根据Id来删，很有可能删错⾏。
jsonReader: {
id: "Id", //相当于设置主键
root: "JsonArray", //Json数据
total: "TotalPage", //总页数
page: "CurrentPage", //当前页
records: "TotalRecord",//总记录数
repeatitems: false
},
这样⼀来，对于数据表格，在C#中，我可以⽤⼀个泛型类，就能够与jqGrid表格进⾏交互(其中，包括了分页信息，数据内容)。
/// <summary>
/// 分页ViewModel
/// </summary>
public class jQGrid<T> where T : class
{
public jQGrid()
{ }
/// <summary>
/// 带4个参数的构造函数
/// </summary>
/// <param name="rows">每页显⽰⾏数</param>
/// <param name="currentPage">当前页</param>
/// <param name="totalRecord">结果总记录数</param>
/// <param name="jsonArray">JSON数据</param>
public jQGrid(int rows, int currentPage, int totalRecord, IList<T> jsonArray)
{
TotalPage = this.CalculateTotalPage(rows, totalRecord);
CurrentPage = currentPage;
TotalRecord = totalRecord;
JsonArray = jsonArray;
}
public int TotalPage { get; set; }
public int CurrentPage { get; set; }
public int TotalRecord { get; set; }
public IList<T> JsonArray { get; set; }
/// <summary>
/// 根据每页显⽰数与总记录数计算出总页数
/
// </summary>
/// <param name="rows">每页显⽰数</param>
/// <param name="totalRecord">结果总记录数</param>
/// <returns></returns>
public int CalculateTotalPage(int rows, int totalRecord)
{
return Convert.ToInt32(Math.Ceiling((double)totalRecord / (double)rows));
}
}
3、搜索的实现
搜索的实现主要通过jqGrid的postData像服务器端传递参数。
$("#btnSearch").click(function () {
var rules = "";
$("#multipleSearchDialog").each(function (i) {
$(".div-padding :input").each(function () {
if ($(this).val()) {
rules += '"' + $(this).attr("name") + '":"' + $(this).val() + '"';
}
})
});
ParamJson = '{' + rules + '}';
var postData = $("#grid-table").jqGrid("getGridParam", "postData");
$.extend(postData, { Param: ParamJson });
$("#grid-table").jqGrid("setGridParam", { search: true }).trigger("reloadGrid", [{ page: 1}]); //重载JQGrid
});
搜索功能主要通过postData向服务器端传递数据。后端获取参数从⽽进⾏处理：
Dictionary<string, string> DicParam = new Dictionary<string, string>();
string Param = Convert.ToString(Request["Param"]);
if (!string.IsNullOrEmpty(Param))
{
System.Web.Script.Serialization.JavaScriptSerializer sr = new System.Web.Script.Serialization.JavaScriptSerializer(); DicParam = sr.Deserialize(Param, typeof(Dictionary<string, string>)) as Dictionary<string, string>;
}
这样就获取到了查询参数的键值对，⾄于参数怎么⽤，⼀般都是⽤于sql的where⼦句。
三、更多jqGrid配置属性说明
1、属性
参数名称类型描述默认值是否可以被修改
ajaxGridOptions object对ajax参数进⾏全局设置，可以覆盖ajax事件：error，complete 和
beforeSend
空值是ajaxGridOptions object对ajax参数进⾏全局设置空值是ajaxSelectOptions object对ajax的select参数进⾏全局设置，设置editoptions跟searchoptions 参数的
select属性值
空值是
altclass String⽤于表格⾏交替变⾊的class属性。你可以定义⾃⼰的class来替代默认值。只
有当altRows属性设置为true时，该属性才起作⽤ui-priority-secondary
是，
但需
要重
新加
载
altRows boolean设置表格是否允许⾏交替变⾊值false是，
需重
新加
载autoencode boolean当为 ture 时对url进⾏编码false是autowidth boolean如果为ture时，则当表格在⾸次被创建时会根据⽗元素⽐例重新调整表格宽
度。如果⽗元素宽度改变，为了使表格宽度能够⾃动调整则需要实现函数：
setGridWidth
false否
caption String定义表格名称空值否，
但是
可以
⽤
api
修改cellLayout integer定义了单元格padding + border 宽度。通常不必修改此值。初始值为
5，paddingLef?2+paddingRight?2+borderLeft?1=5
5否cellEdit boolean启⽤或者禁⽤单元格编辑功能false是cellsubmit String定义了单元格内容保存位置：“remote”，“clientArray”‘remote'是cellurl String单元格提交的url空值是colModel array对显⽰列属性的设置，是⼀个数组对象。常⽤到的属性：name 列显⽰的名
称；index 传到服务器端⽤来排序⽤的列名称；width 列宽度；align 对齐⽅
式；sortable 是否可以排序
空值否
colNames array[]放置列名称的数组，必须与colModel⼤⼩相同空数组否datastr String xmlstring或者jsonstring空值是datatype string从服务器端返回的数据类型，（表格期望接收的数据类型）。可选类型：
xml，xmlstring，json，local，function
xml是deselectAfterSort boolean只有当datatype为local时起作⽤。当排序时不选择当前⾏true是
direction string表格中⽂字的显⽰⽅向，从左向右（ltr）或者从右向左（rtr）。ltr否editurl string定义对form编辑时的url空值是
emptyrecords string当返回的数据⾏数为0时显⽰的信息。只有当属性 viewrecords 设置为ture时起
作⽤在语⾔包
jquery学习在线教程
中
是
ExpandColClick boolean当为true时，点击展开⾏的⽂本时，treeGrid就能展开或者收缩，不仅仅是点击
图⽚
true否ExpandColumn string指定那列来展开tree grid，默认为第⼀列，只有在treeGrid为true时起作⽤空值否footerrow boolean当为true时，会在翻页栏之上增加⼀⾏false否forceFit boolean当为ture时，调整列宽度不会改变表格的宽度。当shrinkToFit 为false时，此属
性会被忽略
false否gridstate string定义当前表格的状态：'visible' or 'hidden'visible否gridview boolean构造⼀⾏数据后添加到grid中，如果设为true则是将整个表格的数据都构造完
成后再添加到grid中，但treeGrid, subGrid, or afterInsertRow 不能⽤
false是height mixed表格⾼度，可以是数字，像素值或者百分⽐150否hiddengrid boolean当为ture时，表格不会被显⽰，只显⽰表格的标题。只有当点击显⽰表格的那
个按钮时才会去初始化表格数据。只有当caption 属性不为空⽽且hidegrid为
ture时才起作⽤
false否
hidegrid boolean启⽤或者禁⽤控制表格显⽰、隐藏的按钮，只有当caption 属性不为空时起效true否hoverrows boolean false时mouse hovering会被禁⽤false是lastpage integer0否lastsort integer0开始0否
loadtext 否loadui string ajax请求时要⼲什么。disable禁⽤ajax执⾏提⽰；enable默认，当执⾏
请求时的提⽰； block启⽤Loading提⽰，但是阻⽌其他操作
enable是mtype string(“POST” or “GET”)GET是
，altKey，ctrlKey
空值是multiboxonly boolean multiselect = true.起作⽤，当multiboxonly 为ture时只有选择checkbox false是multiselect boolean false否multiselectWidth integer multiselect为true时设置multiselect列宽度20否
pager mixed html元素。可以是'pager', '#pager',
推荐⽤'#pager'
空值否pagerpos string center否pgbuttons boolean true否pginput boolean true否pgtext string语⾔包中
设置
是
prmNames array
当参数为null时不会被发到服务器端
none是
reccount integer grid中确切的⾏数。通常情况下与records属性相同，但有⼀
rowNum=15，但是从服务器端返回的记录数是20，那么
值是20，但reccount值仍然为15，⽽且表格中也只显⽰15条记录。
0否
recordpos string left, center, right right否records integer none否
0时才会显⽰此信息
语⾔包是
resizeclass string class到⼀个列上⽤来显⽰列宽度调整时的效果空值否
[10,20,30]。
false否rownumbers boolean ture则会在表格左边新增⼀列，显⽰⾏顺序号，从1开始递增。此列名
'rn'.
20是rowNum integer10，但是
15条记录，那么在表格中只会显⽰10条记录。如果设为-1则禁rownumWidth integer rownumbers为true，则可以设置column的宽度25否savedRow array空值否
true时，翻页栏被禁⽤，使⽤垂直滚动条加载
or
integer
scrollOffset integer18否scrollrows boolean true时让所选择的⾏可见false是selarrrow array-[]empty
否
array [] shrinkToFit boolean ture，则按⽐例初始
true否
false，则列宽度使⽤colModel指定的宽度
sortable boolean false否sortname string空字符串是sortorder string asc or desc）asc是subGrid boolean suggrid false否subGridModel array-[]模型empty
否
array subGridUrl string subgrid数据的url，jqGrid会把每⾏的id值加到url中空值是subGridWidth integer列的宽度20否
body layer），如：[true,”both”] 。⼯具栏位置可选值：“top”,”bottom”,
如果⼯具栏在上⾯，则⼯具栏id为“t_”+表格id；如果在下⾯则为
表格id；如果只有⼀个⼯具栏则为 “t_”+表格id
treedatatype mixed datatype相同，不会变null否treeGrid boolean treegrid模式false否treeGridModel string所使⽤的⽅法nested否treeIcons array{plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-否treeReader array colModel且加在colModel定义的后⾯否tree_root_level numeric元素的级别，0否userData array request中取得的⼀些⽤户信息empty
否
array userDataOnFooter boolean true时把userData放到底部，⽤法：如果userData的值与colModel的值相false是viewrecords boolean false否
false就是只显⽰当前排序列的图标；第⼆个参
vertical：排序图标垂直放置，horizontal：排序图标⽔
能，true：单击列可排序，false：单击图标排
false则第⼀个参数必须为ture否则不能排序
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论