2025-02-17

 

一、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,在上面的例子中是用一個p(<p id=”pager”></p>)來放置的。

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下拉中的內容。

 

clip_image002

 

$("#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');

 

摘自 Hurry的專欄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *