jqGrid获取json数据方法

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#data_manipulation

jqGrid是个好东西，自己百度即可知道。

先声明一下，jquery从1.4开始，对json数据格式要求很严格，不允许使用''单引号，必须使用""双引号。

要获取json数据时，调用方式通常如下：

  $(function () {  
                $("#list47").jqGrid({    
  url:'./AjaxHandler/jqGrid_Jsondata_Content.ashx?page=2',    
                    datatype: "json",      
                    height: "auto",    
                    rowNum: 30,    
                    colNames: ['nothing1', 'nothing2', 'nothing3'],    
                    colModel: [    
{ name: 'content', index: 'content',  350, sorttype: "string" },    
{ name: 'author', index: 'author',  80, sorttype: "string", formatter: "string" },    
{ name: 'datetime', index: 'datetime',  80, sorttype: "string", formatter: "string" }    
],    
                    pager: "#plist47",    
                    viewrecords: true,    
sortorder: "desc"    
                });    
            });

这里的json格式是很讲究的，必须遵循官方文档约定的格式，不能自由。可选的数据类型为json or jsonp, (or jsonstring)    
jqgrid读取json的时候，需要配置jsonReader才能读取，不过jsonReader有默认值，通常不需要做配置。    
jsonReader默认值如下    
jQuery("#gridid").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字符串格式{    
  "total": "xxx",    
  "page": "yyy",    
  "records": "zzz",    
  "rows" : [    
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},    
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},    
      ...    
  ]    
}

root元素

这个root是描述数据在开始，也就是说root指明了一个包含数据的数组。如果我们设置如下：  
jQuery("#gridid").jqGrid({    
...    
   jsonReader : {root:"invdata"},    
...    
});那么返回的json字符串应该如下：    
{    
  "total": "xxx",    
  "page": "yyy",    
  "records": "zzz",    
  "invdata" : [    
    {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},    
    {"id" :"2", "cell":["cell21", "cell22", "cell23"]},    
      ...    
  ]    
}

page，total，records

元素描述了pager需要的信息，如果jsonReader如下设置jQuery("#gridid").jqGrid({  
...    
   jsonReader : {    
      root:"invdata",    
      page: "currpage",    
      total: "totalpages",    
      records: "totalrecords"    
   },    
...    
});那么期望得到的json字符串如下：

{    
  "totalpages": "xxx",    
  "currpage": "yyy",    
  "totalrecords": "zzz",    
  "invdata" : [    
    {"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字符串如下：    
{    
  "totalpages": "xxx",    
  "currpage": "yyy",    
  "totalrecords": "zzz",    
  "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字符串如下： {    
  "totalpages": "xxx",    
  "currpage": "yyy",    
  "totalrecords": "zzz",    
  "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就是行数据的第一个元素

{    
  "totalpages" : "xxx",    
  "currpage" : "yyy",    
  "totalrecords" : "zzz",    
  "invdata" : [    
    ["1", "cell11", "cell12", "cell13"],    
["2", "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字符串如下:    
{    
  "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"},      
      ...    
  ]    
}    
此时，id就是第0个元素，即invid的值

总结的说 repeatitems是true的情况下， id是数字表示rowdata里面的位置，即cell里的位置，repeatitems是false的情况下， id是数字直接代表在json里面的位置。repeatitems:false 设为false是很有用的，这样的话就不必按照colModel的顺序来组件model。    
{    
"totalpages" : "xxx",    
"currpage" : "yyy", "    
totalrecords" : "zzz",    
"invdata" :    
[    
     {"invid" :"1", "invdate" : "cell11", "note" :"somenote"},    
     {"invid" :"2", "amount" : "cell22", "tax" :"cell23", "total" :"2345"}, ...    
]    
}

JSON String  
如果datatype设置为jsonstring，和json是差不多的，只不过需要在本地构造一个json字符串，而不是通过ajax方式获得。    
使用json数据的时候，可以使用name.notation这种形式。例子如下：（repeatitems=false）    
colModel:[    
   {name:'name',label:'Name',  true},    
   {name:'id', sorttype:"int", editable: true},    
   {name:'email',label:'Email',  true,formatter:'email'},    
   {name:'stock',label:'Stock',  align:"center", editable: true,formatter:'checkbox',edittype:"checkbox"},    
{name:'item.price',label:'Price',  align:"right", editable: true,formatter:'currency'},    
{name:'item.weight',label:'Weight', align:"right", editable: true,formatter:'number'},    
   {name:'ship',label:'Ship Via', editable: true,formatter:'select', edittype:"select",editoptions: {value:"2:FedEx;1:InTime;3:TNT;4:ARK;5:ARAMEX"}},     
   {name:'note',label:'Notes',  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: {    
repeatitems: false,    
id: "Id",    
root: function (obj) { return obj; },    
page: function (obj) { return 1; },    
total: function (obj) { return 1; },    
records: function (obj) { return obj.length; }    
}    
obj 是从服务器端获得的响应。