jqgrid jsonReader

1.json 是一个比较好web 传送数据格式,jqgrid里面jsonreader 怎样解析json 数据

jQuery("#gridid").jqGrid({

... jsonReader :

{

root: "rows",  //数据模型

page: "page",//数据页码

total: "total",//数据总页码

records: "records",//数据总记录数

repeatitems: true,//如果设为false,则jqGrid在解析json时,会根据name(colmodel 指定的name)来搜索对应的数据元素(即可以json中元素可以不按顺序)

cell: "cell",//root 中row 行

id: "id",//唯一标识

userdata: "userdata",

subgrid: {

root:"rows", repeatitems: true, cell:"cell"

}

},

... });

示例json 数据格式;

 {

"total": "xxx", "page": "yyy", "records": "zzz",

"rows" : [

{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},

{"id" :"2", "cell":["cell21", "cell22", "cell23"]},

... ]

}

示例2;可以设置自己json 标识

jQuery("#gridid").jqGrid({

... jsonReader :

{

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords",

cell: "invrow", id: "invid" }, ...

});

返回json 格式:

{ "totalpages": "xxx",

"currpage": "yyy",

"totalrecords": "zzz",

"invdata" : [

{"invid" :"1", "invrow" :["cell11", "cell12", "cell13"]},

{"invid" :"2", "invrow" :["cell21", "cell22", "cell23"]},

... ] }

示例3:cell =“” ,id=“0”

jQuery("#gridid").jqGrid({

... jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords",

cell: "",

id: "0" },

... });

返回json格式:

{

"totalpages" : "xxx",

"currpage" : "yyy",

"totalrecords" : "zzz",

"invdata" : [

["1", "cell11", "cell12", "cell13"],

["2", "cell21", "cell22", "cell23"],

... ] }

示例4;设置repeatitems=false ,id=0 一般我都采用这个json格式 没有必要包括所有的数据,表示colModel因为我们的名字进行搜索顺序并不需要colModel的顺序相匹配

jQuery("#gridid").jqGrid({

... jsonReader : {

root:"invdata",

page: "currpage",

total: "totalpages",

records: "totalrecords",

repeatitems: false,

id: "0" },

... });

返回json 格式;

{

"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"},

... ]

}

或者这样json 格式;

{

"totalpages" : "xxx",

"currpage" :"yyy",

"totalrecords" : "zzz",

"invdata" : [

{"invid" :"1", "invdate" : "cell11", "note" :"somenote"},

{"invid" :"2", "amount" : "cell22", "tax" :"cell23", "total" :"2345"},

... ]

}

示例5;当使用JSON数据命名的值repeatitems选项是假的我们可以使用命名符号索引符号

jQuery("#gridid").jqGrid({

... colModel:[

{name:'name',label:'Name', width:150,editable: true},

{name:'id',width:50, sorttype:"int", editable: true,formatter:strongFmatter},

{name:'email',label:'Email', width:150,editable: true,formatter:'email'},

{name:'stock',label:'Stock', width:60, align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},

{name:'item.price',label:'Price', width:100, align:"right", editable: true,formatter:'currency'},

{name:'item.weight',label:'Weight',width:60, align:"right", editable: true,formatter:'number'},

{name:'ship',label:'Ship Via',width:90, editable: true,formatter:'select', edittype:"select",editoptions: value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},

{name:'note',label:'Notes', width:100, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} ],

... });

json 格式数据:

{

"page":"1",

"total":2,

"records":"13",

"rows":[

{"id":"12345","name":"Desktop Computers","email":"josh@josh.com",

"item":{"price":"1000.72", "weight": "1.22" }, "note": "note", "stock": "0","ship": "1"},

{"id":"23456","name":"<var>laptop</var>","note":"Long text ","stock":"yes",

"item":{"price":"56.72", "weight":"1.22"},"ship": "2"},

{"id":"34567","name":"LCD Monitor","note":"note3","stock":"true",

"item":{"price":"99999.72", "weight":"1.22"},"ship":"3"},

{"id":"45678","name":"Speakers","note":"note","stock":"false","ship":"4"}

]

}

如果你感觉上面满足不了你的需求,你可以自定jsonreader 各个属性的函数 ,jsonReader as Function 用法2 .userdata 用法

 示例;

jsonReader: { ... userdata: "userdata", ... }

返回json 格式:

{

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"]},

... ]

}

获取userdata:jQuery("grid_id").jqGrid('getGridParam', 'userData')

原文地址:https://www.cnblogs.com/linsu/p/2877753.html