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
{
"total": "20",
"page": "2",
"records": "55",
"rows": [{"id": "1","cell": ["cell11", "cell12", "cell13"]},
{"id": "2","cell": ["cell21", "cell22", "cell23"]},
...
]
}

  • 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
{
"total": "20",
"page": "2",
"records": "55",
"invdata": [{"id": "1","cell": ["cell11", "cell12", "cell13"]},
{"id": "2","cell": ["cell21", "cell22", "cell23"]},
...
]
}

pagetotalrecords

如果我们设置如下:

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

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

1
2
3
4
5
6
7
8
9
{
"totalpages": "20",
"currpage": "2",
"totalpages": "55",
"totalrecords": [{"id": "1","cell": ["cell11", "cell12", "cell13"]},
{"id": "2","cell": ["cell21", "cell22", "cell23"]},
...
]
}

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
{
"totalpages": "20",
"currpage": "2",
"totalrecords": "55",
"invdata": [{"id": "1","invrow": ["cell11", "cell12", "cell13"]},
{"id": "2","invrow": ["cell21", "cell22", "cell23"]},
...
]
}

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
{
"totalpages": "20",
"currpage": "2",
"totalrecords": "55",
"invdata": [{"invid": "1","invrow": ["cell11", "cell12", "cell13"]},
{"invid": "2","invrow": ["cell21", "cell22", "cell23"]},
...
]
}

可以将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
{
"totalpages": "20",
"currpage": "2",
"totalrecords": "55",
"invdata": [ ["cell11", "cell12", "cell13"],
["cell21", "cell22", "cell23"],
...
]
}

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
{
"totalpages": "20",
"currpage": "2",
"totalrecords": "55",
"invdata": [
{ "invid": "1", "invdate": "cell11", "amount": "cell12", "tax": "cell13", "total": "1234", "note": "somenote" },
{ "invid": "2", "invdate": "cell21", "amount": "cell22", "tax": "cell23", "total": "2345", "note": "some note" },
...
]
}

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

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

  • 本文作者: zhuzhuxia
  • 本文链接: https://www.ofind.cn/blog/Front/jqGrid中Json的解析.html
  • 温馨提示: 由于原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处, 方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力!