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

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

　　此次，我准備向大家介紹一個非常好用的jQuery表格插件——jqGrid。

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

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

 

　　本篇博客將為大家介紹一下內容：

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

 

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

顯示效果：

HTML：

...
<table id="list2"></table>
<div id="pager2"></div>

 

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}        
       ],
       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具體選項的含義。

• 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數據：

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

 

看到jqGrid實際調用的json格式以后，很多讀者朋友會產生疑問。是否只有符合上面格式的json數據才能被jqGrid解析？

答案是：否定的

這里就不得不介紹一下jqGrid的一個重要的選項jsonReader，jsonReader用於設置如何解析從Server端發回來的json數據。上面表格之所以能夠成功解析出來得益於，jsonReader的默認設置。

jsonReader默認設置：

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

 

如果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時：

    ...
    repeatitems: false,
    jsonReader : {
        root:"rows",
        page: "page",
        total: "total",
        records: "records"
    },
    ...

 

json結構：

{ 
    "page" : "xxx", 
    "total" : "yyy",
    "records" : "zzz",
    "rows" : [
         {"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"},
         ...
    ]
}

 

 

　　非常感謝大家能堅持閱讀完本篇博客。

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

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

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

 　　

 

 

 

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

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

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

　　大連理工大學

　　2014-10-17 11:26:01

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