jqGrid簡單使用

1.jqGrid簡單使用；

2.jqGrid常用選項具體含義簡介；

3.jqGrid使用json資料格式，以及jsonReader和repeatitems配合使用時json格式的實際變化。

首先，為大家展示一個非常簡單Demo。使用jqGrid繪制一張表格

顯示效果：

HTML：

JavaScript：

jQuery(“#list2”).jqGrid({

url:’server.php?q=2’,

datatype: “json”,

colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Notes’],

colModel:[{name:’id’,index:’id’, width:55},

{name:’invdate’,index:’invdate’, width:90},

{name:’name’,index:’name asc, invdate’, width:100},

{name:’amount’,index:’amount’, width:80, align:”right”},

{name:’tax’,index:’tax’, width:80, align:”right”},

{name:’total’,index:’total’, width:80,align:”right”},

{name:’note’,index:’note’, width:150, sortable:false} 14 ],

rowNum:10,

rowList:[10,20,30],

pager: ‘#pager2’,

sortname: ‘id’,

viewrecords: true,

sortorder: “desc”,

caption:”JSON Example”

});

jQuery(“#list2”).jqGrid(‘navGrid’,’#pager2’,{edit:false,add:false,del:false});

下面為大家詳細介紹一下上面繪制表格中，jqGrid具體選項的含義。

以上僅僅是最最常用的，最最簡單的選項含義，jqGrid還提供了大量選項友善大家使用，如果讀者朋友們需要小編會在今後的部落格中專門介紹一下jqGrid選項。

相信有很多讀者朋友希望了解到底jqGrid使用的json以什麼樣的格式呈現，下面就為大家展示一下上面表格中使用的json資料：

1 {“page”:”1”,”total”:2,”records”:”13”, 2 “rows”:[ 3 {“id”:”13”,”cell”:[“13”,”2007-10-06”,”Client 3”,”1000.00”,”0.00”,”1000.00”,null]}, 4 {“id”:”12”,”cell”:[“12”,”2007-10-06”,”Client 2”,”700.00”,”140.00”,”840.00”,null]}, 5 {“id”:”11”,”cell”:[“11”,”2007-10-06”,”Client 1”,”600.00”,”120.00”,”720.00”,null]}, 6 {“id”:”10”,”cell”:[“10”,”2007-10-06”,”Client 2”,”100.00”,”20.00”,”120.00”,null]}, 7 {“id”:”9”,”cell”:[“9”,”2007-10-06”,”Client 1”,”200.00”,”40.00”,”240.00”,null]}, 8 {“id”:”8”,”cell”:[“8”,”2007-10-06”,”Client 3”,”200.00”,”0.00”,”200.00”,null]}, 9 {“id”:”7”,”cell”:[“7”,”2007-10-05”,”Client 2”,”120.00”,”12.00”,”134.00”,null]}, 10 {“id”:”6”,”cell”:[“6”,”2007-10-05”,”Client 1”,”50.00”,”10.00”,”60.00”,”“]}, 11 {“id”:”5”,”cell”:[“5”,”2007-10-05”,”Client 3”,”100.00”,”0.00”,”100.00”,”no tax at all”]}, 12 {“id”:”4”,”cell”:[“4”,”2007-10-04”,”Client 3”,”150.00”,”0.00”,”150.00”,”no tax”]} 13 ], 14 “userdata”:{“amount”:3220,”tax”:342,”total”:3564,”name”:”Totals:”}}

看到jqGrid實際調用的json格式以後，很多讀者朋友會産生疑問。是否隻有符合上面格式的json資料才能被jqGrid解析？

答案是：否定的

這裡就不得不介紹一下jqGrid的一個重要的選項jsonReader，jsonReader用于設定如何解析從Server端發回來的json資料。上面表格之是以能夠成功解析出來得益于，jsonReader的預設設定。

jsonReader預設設定：

jsonReader : { 2 root: “rows”, // json中代表實際模型資料的入口

page: “page”, // json中代表目前頁碼的資料

total: “total”, // json中代表頁碼總數的資料

records: “records”, // json中代表資料行總數的資料

repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜尋對應的資料元素（即可以json中元素可以不按順序）；而所使用的name是來自于colModel中的name設定。

cell: “cell”, 8 id: “id”,

userdata: “userdata”,

subgrid: {

}

如果Server端傳回的json資料不太符合預設設定（比如内容結構不同）那麼就有必要修改這一設定。

通常jsonReader和repeatitems是配合使用的，如果repeatitems為false，json 中資料可以亂序，并且允許資料空缺。jqGrid會根據colModel中name屬性和json資料對應，根據屬性名稱進行解析。

repeatitems為true時：

jsonReader : {

root:”rows”,

page: “page”,

total: “total”,

records: “records”

},

json結構：

{

“page”: “xxx”,

“total”: “yyy”,

“records”: “zzz”,

“rows” : [

{“id” :”1”, “cell” :[“cell11”, “cell12”, “cell13”]}, // cell中不需要各列的name，但是需要與colModel一一對應

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

]

repeatitems為false時：

…

“page” : “xxx”,

“total” : “yyy”,

“records” : “zzz”,

{“invid” : “1”,”invdate”:”cell11”, “amount” :”cell12”, “tax” :”cell13”, “total” :”1234”, “note” :”somenote”}, // 資料中需要各列的name，但是可以不按列的順序

{“invid” : “2”,”invdate”:”cell21”, “amount” :”cell22”, “tax” :”cell23”, “total” :”2345”, “note” :”some note”},