首先對Jqgrid網格插件做個簡要的說明。在眾多的表格插件中，Jqgrid的特點是非常鮮明的。
特點如下:
- 完整的表格呈現與運算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
- 自定義的工具列。
- 預設的Navigator工具列，可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。
- 完整的分頁功能。
- 按下任一欄位的標頭，皆可以該欄位為排序項目。無論是升序或降序皆可。
- 預設的action formatter，可以快速而直覺地對每筆資料做運算。
- 支持多種數據格式。比如json、xml、array等。
這是我自己做的DEMO， 先上個圖片，當大家看看吧。
其實要實現上面圖中的效果也不難。跟着我的步驟一步一步實現它吧！
（1）HTML部分
想要順利的使用Jqgrid，需要引用下面6個文件。分別是：
- jquery-ui-1.8.1.custom.css（jQuery UI界面的CSS文件）
- ui.jqgrid.custom.css（專用於jqGrid界面的CSS文件）
- jquery-1.7.2.js（jQuery的核心）
- jquery-ui-1.8.1.custom.min.js（用於支持jQuery UI界面）
- grid.locale-zh-CN.js（針對jqGrid的locale設置，根據locale不同，選擇不同的尾綴）
- jquery.jqGrid.min.js（jqGrid的核心，可以到jqGrid網站，根據需求選擇模塊下載）
然后在html的body里面創建一個table和div並賦予id屬性就行了。如圖，非常簡潔。
|
1
2
3
4
5
6
|
<link href=
"<%=basePath%>main/css/ui.jqgrid.css"
rel=
"stylesheet"
type=
"text/css"
/>
<link href=
"<%=basePath%>main/css/jquery-ui-1.8.1.custom.css"
rel=
"stylesheet"
type=
"text/css"
/>
<script type=
"text/javascript"
src=
"<%=basePath%>main/js/jquery-1.7.2.js"
></script>
<script type=
"text/javascript"
src=
"<%=basePath%>main/js/grid.locale-zh_CN.js"
></script>
<script type=
"text/javascript"
src=
"<%=basePath%>main/js/jquery.jqGrid.min.js"
></script>
<script type=
"text/javascript"
src=
"<%=basePath%>main/js/grid.custom.js"
></script>
|
（2）JS部分
官方文檔說實現一個要想生成一個 Jqgrid ，最直接的方法就是：
$(“#grid_id”).jqGrid(options);也就是得到一個table的jquery對象，然后傳遞options就可以得到一個Jqgrid對象。
簡單的介紹下options中最重要的部分。
1. jqGrid的重要選項
具體的options參考，可以訪問Jqgrid文檔關於option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：
- url：提交處理數據的地址。
- datatype：這個參數用於設定將要得到的數據類型。我最常用的是“json”，其余的類型還包括：xml、xmlstring、local、javascript、function。
- mtype: 定義使用哪種方法發起請求，GET或者POST。
- height：Grid的高度，可以接受數字、%值、auto，默認值為150。
- width：Grid的寬度，如果未設置，則寬度應為所有列寬的之和；如果設置了寬度，則每列的寬度將會根據shrinkToFit選項的設置，進行設置。
- shrinkToFit：此選項用於根據width計算每列寬度的算法。默認值為true。如果shrinkToFit為true且設置了width值，則每列寬度會根據width成比例縮放；如果shrinkToFit為false且設置了width值，則每列的寬度不會成比例縮放，而是保持原有設置，而Grid將會有水平滾動條。
- autowidth：默認值為false。如果設為true，則Grid的寬度會根據父容器的寬度自動重算。重算僅發生在Grid初始化的階段；如果當父容器尺寸變化了，同時也需要變化Grid的尺寸的話，則需要在自己的代碼中調用setGridWidth方法來完成。
- pager：定義頁碼控制條PageBar
- sortname：指定默認的排序列，可以是列名也可以是數字。此參數會在被傳遞到服務端。
- viewrecords：設置是否在PagerBar顯示所有記錄的總數。
- caption：Grid的標題。如果設置了，則將顯示在Grid的Header層 ；如果未設置，則標題區域不顯示 。
- rowNum：用於設置Grid中一次顯示的行數，默認值為20。
- rowList：一個數組，用於設置Grid可以接受的rowNum值。例如[10,20,30]。
- prmNames：這是一個數組，用於設置jqGrid將要向服務端傳遞的參數名稱。我們一般不用去改變什么。
- colModel：最重要的數組之一，用於設定各列的參數。（稍后詳述）
- jsonReader：這又是一個數組，用來設定如何解析從Server端發回來的json數據。（稍后詳述）
2. colModel的重要選項
和Jqgrid一樣colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這里先只說說最基本的。
- name：為Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
- index：設置排序時所使用的索引名稱，這個index名稱會作為sidx參數傳遞到服務端。
- label：表格顯示的列名。
- width：設置列的寬度，目前只能接受以px為單位的數值，默認為150。
- sortable：設置該列是否可以排序，默認為true。
- search：設置該列是否可以被列為搜索條件，默認為true。
- resizable：設置列是否可以變更尺寸，默認為true。
- hidden：設置此列初始化時是否為隱藏狀態，默認為false。
- formatter：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等（具體參見文檔）。
3. jsonReader選項
jsonReader是Jqgrid的一個重要選項，用於設置如何解析從服務端發回來的json數據。其默認值為：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
jsonReader : {
root :
"rows"
,
// 實際模型的人口
page :
"page"
,
// 當前頁碼
total : total,
// 當前共多少頁
records :
"records"
,
// 總共多少行數據
repeatitems :
true
,
cell :
"cell"
,
id :
"id"
,
userdata :
"userdata"
,
// 數據
subgrid : {
root :
"rows"
,
repeatitems :
true
,
cell :
"cell"
}
}
|
我們可以這樣理解，prmNames設置了如何將Grid所需要的參數傳給服務端，而jsonReader設置了如何去解析從服務端傳回來的json數據。如果沒有設置jsonReader的話，Jqgrid將會根據默認的設置來解析json數據，並顯示在表格里。一般情況下，我們修改jsonReader的root為服務端傳遞過來的數組就可以滿足要求了。比如：
|
1
2
3
4
5
6
|
jsonReader : {
root :
"dataList"
,
// 服務端保存數據的集合
records :
"record"
,
// 可以不要,因為我的服務端是record,不是默認的,才加上的
repeatitems :
false
// 其它的全部默認就行
}
|
由此，Jqgrid完成一個request，並將得到的response，解析為所需的數據，顯示到Grid表格中。整個流程就走完了。
原創文章，轉載請注明： 轉載自java開發者
本文鏈接地址: Jqgrid入門-顯示基本的表格(一)