一、 jqGrid的加載。
1.引用相關頭文件
引入CSS：
<link href="Scripts/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" />
<link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
引入JS：
<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
因爲jqGrid3.6及以後的版本集成了jQuery UI，所以，此處需要導入UI相關js和css。另外grid.locale-en.js這個語言文件必須在jquery.jqGrid.min.js之前加載，否則會出問題。
2.將jqgrid加入頁面中
根據jqGrid的文檔，要想生成一個jqGrid，最直接的方法就是：
$("#list").jqGrid(options);
其中list是頁面上的一個table：<table id="list"></table>
下面是一個簡單的例子：
<script type="text/javascript">
$(document).ready(function () {jQuery("#list").jqGrid({url: 'Handler.ashx',
datatype: "json",
mtype: 'GET',
colNames: ['SalesReasonID', 'Name', 'ReasonType', 'ModifiedDate'],
colModel: [
{ name: 'SalesReasonID', index: 'SalesReasonID', width: 40, align: "left", editable: true },{ name: 'Name', index: 'Name', width: 100, align: "center" },{ name: 'ReasonType', index: 'ReasonType', width: 100, align: "center" },{ name: 'ModifiedDate', index: 'ModifiedDate', width: 150, align: "center", search: false }],
rowList: [10, 20, 30],
sortname: 'SalesReasonID',
viewrecords: true,
sortorder: "desc",
jsonReader: {root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
},
pager: jQuery('#pager'),rowNum: 5,
altclass: 'altRowsColour',
//width: 'auto',
width: '500',
height: 'auto',
caption: "DemoGrid"
}).navGrid('#pager', { add: true, edit: true, del: true,search:false,refresh:false }); ;})
二、 jqgrid的重要選項
具體的options參考，可以訪問jqGrid文檔關於option的章節（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options）。其中有幾個是比較常用的，重點介紹一下：
url ：jqGrid控件通過這個參數得到需要顯示的數據，具體的返回值可以使XML也可以是Json。
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 ：定義頁碼控制條Page Bar，在上面的例子中是用一個div(<div id=”pager”></div>)來放置的。
sortname ：指定默認的排序列，可以是列名也可以是數字。此參數會在被傳遞到Server端。
viewrecords ：設置是否在Pager Bar顯示所有記錄的總數。
caption ：設置Grid表格的標題，如果未設置，則標題區域不顯示。
rowNum ：用於設置Grid中一次顯示的行數，默認值爲20。正是這個選項將參數rows（prmNames中設置的）通過url選項設置的鏈接傳遞到Server。注意如果Server返回的數據行數超過了rowNum的設定，則Grid也只顯示rowNum設定的行數。
rowList ：一個數組，用於設置Grid可以接受的rowNum值。例如[10,20,30]。
colNames ：字符串數組，用於指定各列的題頭文本，與列的順序是對應的。
colModel ：最重要的數組之一，用於設定各列的參數。（稍後詳述）
prmNames ：這是一個數組，用於設置jqGrid將要向Server傳遞的參數名稱。（稍後詳述）
jsonReader ：這又是一個數組，用來設定如何解析從Server端發回來的json數據。（稍後詳述）
2.1 prmNames選項
prmNames是jqGrid的一個重要選項，用於設置jqGrid將要向Server傳遞的參數名稱。其默認值爲：
prmNames : {
page:"page", // 表示請求頁碼的參數名稱
rows:"rows", // 表示請求行數的參數名稱
sort: "sidx", // 表示用於排序的列名的參數名稱
order: "sord", // 表示採用的排序方式的參數名稱
search:"_search", // 表示是否是搜索請求的參數名稱
nd:"nd", // 表示已經發送請求的次數的參數名稱
id:"id", // 表示當在編輯數據模塊中發送數據時，使用的id的名稱
oper:"oper", // operation參數名稱
editoper:"edit", // 當在edit模式中提交數據時，操作的名稱
addoper:"add", // 當在add模式中提交數據時，操作的名稱
deloper:"del", // 當在delete模式中提交數據時，操作的名稱
subgridid:"id", // 當點擊以載入數據到子表時，傳遞的數據名稱
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數據的參數名稱，參見jqGrid選項中的rowTotal
}
2.2 jsonReader選項
jsonReader是jqGrid的一個重要選項，用於設置如何解析從Server端發回來的json數據，如果Server返回的是xml數據，則對應的使用xmlReader來解析。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"
}
}
假如有下面一個json字符串：
{"totalpages":"3","currpage":"1","totalrecords":"11","griddata":[{"SalesReasonID":"1","Name":"Price","ReasonType":"Other","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998年6月1日"}]}
其對應的jsonReader爲：jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注：cell、id在repeatitems爲true時可以用到，即每一個記錄是由一對id和cell組合而成，即可以適用另一種json結構。援引文檔中的例子：
repeatitems爲true時：
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"]}, // cell中不需要各列的name，只要值就OK了，但是需要保持對應
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems爲false時：
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"}, // 數據中需要各列的name，但是可以不按列的順序
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要選項
colModel也有許多非常重要的選項，在使用搜索、排序等方面都會用到。這裏先只說說最基本的。
name ：爲Grid中的每個列設置唯一的名稱，這是一個必需選項，其中保留字包括subgrid、cb、rn。
index ：設置排序時所使用的索引名稱，這個index名稱會作爲sidx參數（prmNames中設置的）傳遞到Server。
label ：當jqGrid的colNames選項數組爲空時，爲各列指定題頭。如果colNames和此項都爲空時，則name選項值會成爲題頭。
width ：設置列的寬度，目前只能接受以px爲單位的數值，默認爲150。
sortable ：設置該列是否可以排序，默認爲true。
search ：設置該列是否可以被列爲搜索條件，默認爲true。
resizable ：設置列是否可以變更尺寸，默認爲true。
hidden ：設置此列初始化時是否爲隱藏狀態，默認爲false。
formatter ：預設類型或用來格式化該列的自定義函數名。常用預設格式有：integer、date、currency、number等（具體參見文檔 ）。
三、 注意事項
1. 動態改變Add Form或者Edit Form中的select的內容，如：改變下圖中的Comparator下拉中的內容。
$("#list_d").navGrid('#pager_d',{add:true,edit:true,del:true,search:false,refresh:false},
{
checkOnSubmit:false, closeAfterEdit: true,recreateForm:true,
beforeInitData:function(formid){
initComparator();
},
beforeShowForm: function(formid){
$("#list_d").jqGrid('setColProp', 'Name', { editrules:{required:false},});
$('#tr_Name', formid).hide();
}
}，//edit
{},//add
{}//del
）
beforeInitData, beforeShowForm在每次點擊編輯的時候都會執行。initComparator的作用是通過ajax獲取數據，然後利用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來設置Comparator下拉中的內容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號隔開，2項之間用分號隔開。注意：把recreateForm設爲true，否則'setColProp'只在第一次調用時有效。
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數據條數。
3. jQuery("#list_d").clearGridData();清空數據。
4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete：中在gird加載完成的時候自動選中第一行。loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 對於像1中的可編輯的字段，可以設定rule，參見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 修改Option，以URL爲例
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');