jqGrid 是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。
一、要引用的文件
要使用jqGrid，首先页面上要引入如下css与js文件。
1、css
<link href="https://www.jb51.net/css/ui.jqgrid.css" type="text/css" />
2、js
<script src='https://www.jb51.net/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='https://www.jb51.net/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='https://www.jb51.net/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>每页显示行数</param> /// <param>当前页</param> /// <param>结果总记录数</param> /// <param>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>每页显示数</param> /// <param>结果总记录数</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向服务器端传递数据。后端获取参数从而进行处理：