jqGrid使用經驗分享（一）——jqGrid簡單使用、json格式和jsonReader介紹

標籤：des   style   blog   http   color   io   ar   使用   java   

　　廣大的讀者朋友們大家好，很高興又可以在部落格中和大家分享我的開發經驗了。

　　此次，我準備向大家介紹一個非常好用的jQuery表格外掛程式——jqGrid。

　　如果您在實際項目中遇到web端表格展示功能的需求，又不知道到底該使用那種技術實現時，jqGrid絕對是您的不二之選。

　　如果您已經決定使用jqGrid技術完成項目中表格展示功能，又苦於沒有詳細的使用說明遲遲不能實際開發時，本系列部落格絕對是您的不二之選。

 

　　本篇部落格將為大家介紹一下內容：

1. 　　jqGrid簡單使用；
2. 　　jqGrid常用選項具體含義簡介；
3. 　　jqGrid使用json資料格式，以及jsonReader和repeatitems配合使用時json格式的實際變化。

 

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

顯示效果：

HTML：

1 ...2 <table id="list2"></table>3 <div id="pager2"></div>

 

JavaScript：　　

 1 ... 2 jQuery("#list2").jqGrid({ 3        url:‘server.php?q=2‘, 4     datatype: "json", 5        colNames:[‘Inv No‘,‘Date‘, ‘Client‘, ‘Amount‘,‘Tax‘,‘Total‘,‘Notes‘], 6        colModel:[ 7            {name:‘id‘,index:‘id‘, width:55}, 8            {name:‘invdate‘,index:‘invdate‘, width:90}, 9            {name:‘name‘,index:‘name asc, invdate‘, width:100},10            {name:‘amount‘,index:‘amount‘, width:80, align:"right"},11            {name:‘tax‘,index:‘tax‘, width:80, align:"right"},        12            {name:‘total‘,index:‘total‘, width:80,align:"right"},        13            {name:‘note‘,index:‘note‘, width:150, sortable:false}        14        ],15        rowNum:10,16        rowList:[10,20,30],17        pager: ‘#pager2‘,18        sortname: ‘id‘,19     viewrecords: true,20     sortorder: "desc",21     caption:"JSON Example"22 });23 jQuery("#list2").jqGrid(‘navGrid‘,‘#pager2‘,{edit:false,add:false,del:false});

 

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

• url：這個參數指定了jqGrid從伺服器擷取資料的請求。
• datatype：這個參數指定了jqGrid調用的資料的格式，常用格式有json，xml，local。
• colName：這個參數指定了jqGrid每列的title，按順序依次排列，並且可以看出實際上它就是一個字串數組。
• colModel：這個參數指定了jqGrid各列的具體格式，"name"指定對應資料中屬性名稱，“index”用於列排序，“width”顯然是指定列寬，“align”對齊，“sortable”指定是否支援排序。其實上面每一個設定基本見名知意，大家可以大膽使用。（注意：colName與colModel 需要一一對應）
• rowNum：這個參數指定了jqGrid顯示行數，預設值20。
• rowList：這個參數指定了jqGrid可以接受的rowNum值，如[10,20,30]。實際上它也僅僅是一個數組。
• pager：這個參數指定了jqGrid頁尾顯示位置。
• sortname：這個參數指定了jqGrid預設的排序列，可以是列名也可以是數字。
• viewrecords：這個參數設定了是否在Pager Bar顯示所有記錄的總數。
• sortorder：這個參數指定了jqGrid預設排序列的預設排序方式。
• caption：這個參數制訂了jqGrid的標題，如果設定了，則將顯示在Grid的Header層。

以上僅僅是最最常用的，最最簡單的選項含義，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預設設定：

 1 jsonReader : { 2     root: "rows",    // json中代表實際模型資料的入口 3     page: "page",    // json中代表當前頁碼的資料 4     total: "total",    // json中代表頁碼總數的資料 5     records: "records", // json中代表資料行總數的資料 6     repeatitems: true, // 如果設為false，則jqGrid在解析json時，會根據name來搜尋對應的資料元素（即可以json中元素可以不按順序）；而所使用的name是來自於colModel中的name設定。 7     cell: "cell", 8     id: "id", 9     userdata: "userdata",10     subgrid: {11         root:"rows", 12         repeatitems: true, 13         cell:"cell"14     }15 }

 

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

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

repeatitems為true時：

1     ...2     jsonReader : {3         root:"rows",4         page: "page",5         total: "total",6         records: "records"7     },8     ...

 

json結構：

 1 {  2     "page": "xxx",  3     "total": "yyy", 4     "records": "zzz", 5     "rows" : [ 6                  {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},    // cell中不需要各列的name，但是需要與colModel一一對應 7                  {"id" :"2", "cell" :["cell21", "cell22", "cell23"]}, 8                  ... 9     ]10 }

 

repeatitems為false時：

1     ...2     repeatitems: false,3     jsonReader : {4         root:"rows",5         page: "page",6         total: "total",7         records: "records"8     },9     ...

 

json結構：

 1 {  2     "page" : "xxx",  3     "total" : "yyy", 4     "records" : "zzz", 5     "rows" : [ 6          {"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 資料中需要各列的name，但是可以不按列的順序 7          {"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"}, 8          ... 9     ]10 }

 

 

　　非常感謝大家能堅持閱讀完本篇部落格。

　　小編深知一篇部落格不能完全介紹jqGrid的眾多細節，所以會在今後的部落格中不斷介紹jqGrid的其他細節。

　　小編希望可以通過部落格將自己在jqGrid使用時遇到的各種各樣的問題和解決方案分享給廣大讀者朋友們，希望可以協助大家快速學習jqGrid，避免在不必要的細節上浪費大量時間。

　　另外如果有讀者朋友和小編一樣對jqGrid十分偏愛，可以在評論區和小編一起討論jqGrid的許許多多優缺點，並一起討論相關解決方案。

 　　

 

 

 

　　***************************

　　非常感謝讀者朋友們對小編的支援，小編非常開心可以和大家分享我的開發經驗。

　　如果我的經驗可以協助到讀者朋友們，是小編最大的動力和榮幸。

　　蔣繼發

　　大連理工大學

　　2014-10-17 11:26:01

　　***************************

 

jqGrid使用經驗分享（一）——jqGrid簡單使用、json格式和jsonReader介紹