jqGrid专题：数据加载

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', width: '60' },
43                     { name: 'StuName', index: 'StuName', width: '100' },
44                     { name: 'StuSex', index: 'StuSex', width: '60' },
45                     { name: 'StuBirthday', index: 'StuBirthday', width: '100' },
46                     { name: 'StuScore', index: 'StuScore', width: '60', align: 'right' },
47                     { name: 'StuArea', index: 'StuArea', width: '80' },
48                     { name: 'StuMemo', index: 'StuMemo', width: '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                 width: '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缓存问题，目前不知什么原因，没详细调试，待大虾指点。

 

 

 

 

 

 

posted @ 2013-04-25 16:55  一点晨辉(ydchsoft)  阅读(651)  评论(0)  编辑  收藏  举报
41
0