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":"laptop","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 是從伺服器端獲得的響應。

jqGrid獲取json資料方法

相關文章