jqGrid早期版本只能加载xml格式的数据，经过多个版本，目前jqGrid支持的数据格式有很多种了，这些数据可以是：
datatype: the possible options are
-
xml
-
json
-
jsonp
-
array
-
xmlstring
-
jsonstring
-
script
-
function (…)
这里我们只侧重研究下json数据，写Demo之前先来熟悉下 prmNames 和 jsonReader 参数:
1 //自定义向Server发送的参数名称 2 prmNames: { 3 page: "page", // 表示请求页码的参数名称 4 rows: "rows", // 表示请求行数的参数名称 5 sort: "sidx", // 表示用于排序的列名的参数名称 6 order: "sord", // 表示采用的排序方式的参数名称 7 search: "_search", // 表示是否是搜索请求的参数名称 8 nd: "nd", // 表示已经发送请求的次数的参数名称 9 id: "id", // 表示当在编辑数据模块中发送数据时,使用的id的名称 10 oper: "oper", // operation参数名称 11 editoper: "edit", // 当在edit模式中提交数据时，操作的名称 12 addoper: "add", // 当在add模式中提交数据时，操作的名称 13 deloper: "del", // 当在delete模式中提交数据时，操作的名称 14 subgridid: "id", // 当点击以载入数据到子表时，传递的数据名称 15 npage: null, 16 totalrows: "totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal 17 }
1 //设置如何解析从Server端发回来的json格式 2 jsonReader : { 3 root: "rows", // json中代表实际模型数据的入口 4 page: "page", // json中代表当前页码的数据 5 total: "total", // json中代表页码总数的数据 6 records: "records", // json中代表数据行总数的数据 7 repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序 8 cell: "cell", 9 id: "id", 10 userdata: "userdata", 11 subgrid: { 12 root:"rows", 13 repeatitems: true, 14 cell: "cell" 15 } 16 }
下面写个Demo (asp.net)
1.页面 demo.aspx:
1 $(function () { 2 $("#gridDemo").jqGrid({ 3 url:'/Handler/demoHandler.ashx', //获取数据地址 4 datatype: 'json', //从服务器端返回数据类型(默认xml) 5 mtype: 'POST', //ajax 提交方式(默认GET) 6 postData: { test: 100 }, 7 //自定义向Server发送的参数的名称 8 prmNames: { 9 page: "page1", // 表示请求页码的参数名称 10 rows: "rows1", // 表示请求行数的参数名称 11 sort: "sidx1", // 表示用于排序的列名的参数名称 12 order: "sord1", // 表示采用的排序方式的参数名称 13 search: "_search1", // 表示是否是搜索请求的参数名称 14 nd: "nd1", // 表示已经发送请求的次数的参数名称 15 id: "id", // 表示当在编辑数据模块中发送数据时,使用的id的名称 16 oper: "oper", // operation参数名称 17 editoper: "edit", // 当在edit模式中提交数据时，操作的名称 18 addoper: "add", // 当在add模式中提交数据时，操作的名称 19 deloper: "del", // 当在delete模式中提交数据时，操作的名称 20 subgridid: "id", // 当点击以载入数据到子表时，传递的数据名称 21 npage: null, 22 totalrows: "totalrows" // 表示需从Server得到总共多少行数据的参数名称，参见jqGrid选项中的rowTotal 23 }, 24 //设置如何解析从Server端发回来的json格式,jqGrid根据这个jsonReader 来把数据加入到表格中显示，否则按照默认格式显示。 25 jsonReader : { 26 root: "rows1", // json中代表实际模型数据的入口 27 page: "page", // json中代表当前页码的数据 28 total: "total", // json中代表页码总数的数据 29 records: "records", // json中代表数据行总数的数据 30 repeatitems: true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序)。 31 cell: "cell", 32 id: "id", 33 userdata: "userdata", 34 subgrid: { 35 root:"rows", 36 repeatitems: true, 37 cell: "cell" 38 } 39 }, 40 colNames: ['学号','姓名','性别','出生日期','学分','地区','简介'], 41 colModel: [ 42 { name: 'StuId', index: 'StuId', '60' }, 43 { name: 'StuName', index: 'StuName', '100' }, 44 { name: 'StuSex', index: 'StuSex', '60' }, 45 { name: 'StuBirthday', index: 'StuBirthday', '100' }, 46 { name: 'StuScore', index: 'StuScore', '60', align: 'right' }, 47 { name: 'StuArea', index: 'StuArea', '80' }, 48 { name: 'StuMemo', index: 'StuMemo', '300' } 49 ], 50 rownumbers: true, 51 rownumberWidth: 20, 52 toolbar: [true,"both"], 53 rowNum: 10, 54 rowList: [10, 20, 30], 55 pager: '#pager', 56 sortname: 'StuId', 57 sortorder: 'desc', 58 viewrecords: true, 59 multiselect:true, 60 caption: '学生信息表', 61 '1000', 62 height: 'auto' 63 }); 64 $("#gridDemo").jqGrid("navGrid", "#pager", { add: true, del: true, edit: true }); 65 });
2、后台数据处理程序 demoHandler.ashx:
1 public void ProcessRequest (HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 List<Student> lst = Data.GetList(); 5 string jsonLst = JsonConvert.SerializeObject(lst); 6 context.Response.Write(jsonLst); 7 }
3、显示效果:
注：IE9及以下版本，使用POST方式ajax提交时，有时候请求会被挂起，测试过不是IE ajax缓存问题，目前不知什么原因，没详细调试，待大虾指点。