Data types supported by jqGrid: xml, json, json, local or clientSide, xmlstring, jsonstring, script, function ( )
Json data
jsonReader needs to be defined to correspond to the data returned by the server. Its default value is:
{
"cell": "cell",
"id": "id",
"page": "page",
"records": "records",
"repeatitems": true,
"root": "rows",
"subgrid": {
"cell": "cell",
"repeatitems": true,
"root": "rows"
},
"total": "total",
"userdata": "userdata"
}
The data format returned by the server is as follows:
{
"page": "yyy",
"records": "zzz",
"rows": [
{
"cell": [
"cell11",
"cell12",
"cell13"
],
"id": "1"
},
{
"cell": [
"cell21",
"cell22",
"cell23"
],
"id": "2"
}
],
"total": "xxx"
}
Properties of jsonReader
Custom data resolution
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
cell: "invrow"
},
...
});
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
invdata : [
{id:"1", invrow:["cell11", "cell12", "cell13"]},
{id:"2", invrow:["cell21", "cell22", "cell23"]},
...
]
Repeat items: indicates that the data in each row can be repeated. If it is set to false, the element will be searched by name from the returned data, which is the name in colModel.
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
}
totalpages: "xxx",
currpage: "yyy",
totalrecords: "zzz",
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"},
...
]
In this case, the id attribute value is "invid." Once this property is set to false, we do not have to assign all the name values defined in colModel. Because it searches for elements by name, its sorting is not the result specified in colModel.
In some cases, we need to return some parameters from the server, but we don't want to display them directly in the table, but want to display them in other places, so we need to use the user data tag
jsonReader: {
...
userdata: "userdata",
...
}
{
total: "xxx",
page: "yyy",
records: "zzz",
userdata: {totalinvoice:240.00, tax:40.00},
rows : [
{id:"1", cell:["cell11", "cell12", "cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23"]},
...
]
}
On the client side, we can get these additional information in two ways:
-
jQuery("grid_id").getGridParam('userData')
-
jQuery("grid_id").getUserData()
-
jQuery("grid_id").getUserDataItem( key )