jqGrid中Json的解析

这里主要说明一下在jqGrid中使用Json数据格式的响应，主要是配置jsonReader信息。

$("#jqGrid").jqGrid({
    url: './test/returnJSON',
    datatype: "json",
    height: "auto",
    rowNum: 30,
    colNames: ['id','name', 'age', 'address'],
    colModel: [
        { name: 'id', index: 'id', 350, sorttype: "string" },
        { name: 'name', index: 'name', 350, sorttype: "string" },
        { name: 'age', index: 'age', 350, sorttype: "string" },
        { name: 'address', index: 'address', 580, sorttype: "string" },
    ],
    pager: "#jqGridPage",
    viewrecords: true,
    sortorder: "desc"
});

这里的json格式是很讲究的，必须遵循官方文档约定的格式，不能自由。可选的数据类型为json or jsonp, (or jsonstring)
jqgrid读取json的时候，需要配置jsonReader才能读取，不过jsonReader有默认值，通常不需要做配置。
jsonReader默认值如下

jQuery("#jqGrid").jqGrid({
  ...
  jsonReader: {         
    root: "rows",        //root这里的值是rows，意味着它会读取json中的rows键的值，这个值就是真实的数据
    page: "page",        //root这里的值是page，意味着它会读取json中的page键的值，当前页号
    total: "total",      //总的页数
    records: "records",  //总记录数
    repeatitems: true,   //如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
    cell: "cell",
    id: "id",     
    userdata: "userdata",
    subgrid: {
      root: "rows",
      repeatitems: true,
      cell: "cell"
    }
  },
  ...
});

如果数据类型是json，那么默认的期望得到的json字符串格式

1
2
3
4
5
6
7
8
9

• JSON中Key 含义说明
  • total 总页数
  • page 当前页数
  • records 记录数
  • rows 包含真实数据的数组
  • id 每一行的唯一id
  • cell 包含行的数据的数组

root元素

这个root是描述数据的开始，也就是说root指明了一个包含数据的数组。
如果我们设置如下：

jQuery("#gridid").jqGrid({ 
   ... 
   jsonReader : {root:"invdata"}, 
   ... 
});

那么返回的json字符串应该如下：

1
2
3
4
5
6
7
8
9

page，total，records

如果我们设置如下：

jQuery("#gridid").jqGrid({ 
   ... 
     jsonReader : { 
      root:"invdata", 
      page: "currpage", 
      total: "totalpages", 
      records: "totalrecords" 
   }, 
   ... 
});

那么返回的json字符串应该如下：

1
2
3
4
5
6
7
8
9

cell

元素描述了包含行数据的数组，如果jsonReader如下设置

jQuery("#gridid").jqGrid({ 
   ... 
     jsonReader : { 
      root:"invdata", 
      page: "currpage", 
      total: "totalpages", 
      records: "totalrecords",
      cell: "invrow"
   }, 
   ... 
});

那么返回的json字符串应该如下：

1
2
3
4
5
6
7
8
9

id

此元素描述了每一行的唯一的id值，如果jsonReader如下设置

jQuery("#gridid").jqGrid({ 
   ... 
     jsonReader : { 
      root:"invdata", 
      page: "currpage", 
      total: "totalpages", 
      records: "totalrecords",
      cell: "invrow", 
      id: "invid"      
   }, 
   ... 
});

那么返回的json字符串应该如下：

1
2
3
4
5
6
7
8
9

可以将cell元素设置为空字符串，也可以将id设置为数字，如果这样的话，例子如下

jQuery("#gridid").jqGrid({ 
   ... 
     jsonReader : { 
      root:"invdata", 
      page: "currpage", 
      total: "totalpages", 
      records: "totalrecords",
      cell: "", 
      id: "0"   //设为数字的话，rowid=第0个格子的内容，此处rowid=cell11，rowid=cell21    
   }, 
   ... 
});

这样的话，id就是行数据的第一个元素

那么返回的json字符串应该如下：

1
2
3
4
5
6
7
8
9

repeatitems

此元素设置为ture,则cell里的元素顺序和colModel的顺序一致，按顺序显示。如果要让jqGrid根据json数据搜素元素，则把repeatable设置为false，此时设置cell属性无意义。

jQuery("#gridid").jqGrid({...
    jsonReader: {
        root: "invdata",
        page: "currpage",
        total: "totalpages",
        records: "totalrecords",
        repeatitems: false,
        id: "0"
    },
    ...
});

期望的json字符串如下:

1
2
3
4
5
6
7
8
9
10

此时，id就是第0个元素，即invid的值

总结的说 repeatitems是true的情况下， id是数字表示rowdata里面的位置，即cell里的位置，repeatitems是false的情况下， id是数字直接代表在json里面的位置。repeatitems:false 设为false是很有用的，这样的话就不必按照colModel的顺序来组件model。