一、 jqGrid的加載。
1.引用相關(guān)頭文件
引入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>
因?yàn)閖qGrid3.6及以后的版本集成了jQuery UI,所以,此處需要導(dǎo)入U(xiǎn)I相關(guān)js和css。另外grid.locale-en.js這個(gè)語(yǔ)言文件必須在jquery.jqGrid.min.js之前加載,否則會(huì)出問(wèn)題。
2.將jqgrid加入頁(yè)面中
根據(jù)jqGrid的文檔,要想生成一個(gè)jqGrid,最直接的方法就是:
$("#list").jqGrid(options);
其中l(wèi)ist是頁(yè)面上的一個(gè)table:<table id="list"></table>
下面是一個(gè)簡(jiǎn)單的例子:
<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的重要選項(xiàng)
具體的options參考,可以訪問(wèn)jqGrid文檔關(guān)于option的章節(jié)(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options)。其中有幾個(gè)是比較常用的,重點(diǎn)介紹一下:
- url :jqGrid控件通過(guò)這個(gè)參數(shù)得到需要顯示的數(shù)據(jù),具體的返回值可以使XML也可以是Json。
- datatype :這個(gè)參數(shù)用于設(shè)定將要得到的數(shù)據(jù)類型。類型包括:json 、xml、xmlstring、local、javascript、function。
- mtype : 定義使用哪種方法發(fā)起請(qǐng)求,GET或者POST。
- height :Grid的高度,可以接受數(shù)字、%值、auto,默認(rèn)值為150。
- width :Grid的寬度,如果未設(shè)置,則寬度應(yīng)為所有列寬的之和;如果設(shè)置了寬度,則每列的寬度將會(huì)根據(jù)shrinkToFit選項(xiàng)的設(shè)置,進(jìn)行設(shè)置。
- shrinkToFit :此選項(xiàng)用于根據(jù)width計(jì)算每列寬度的算法。默認(rèn)值為true。如果shrinkToFit為true且設(shè)置了width值,則每列寬度會(huì)根據(jù) width成比例縮放;如果shrinkToFit為false且設(shè)置了width值,則每列的寬度不會(huì)成比例縮放,而是保持原有設(shè)置,而Grid將會(huì)有 水平滾動(dòng)條。
- autowidth :默認(rèn)值為false。如果設(shè)為true,則Grid的寬度會(huì)根據(jù)父容器的寬度自動(dòng)重算。重算僅發(fā)生在Grid初始化的階段;如果當(dāng)父容器尺寸變化了,同時(shí)也需要變化Grid的尺寸的話,則需要在自己的代碼中調(diào)用setGridWidth方法來(lái)完成。
- pager :定義頁(yè)碼控制條Page Bar,在上面的例子中是用一個(gè)div(<div id=”pager”></div>)來(lái)放置的。
- sortname :指定默認(rèn)的排序列,可以是列名也可以是數(shù)字。此參數(shù)會(huì)在被傳遞到Server端。
- viewrecords :設(shè)置是否在Pager Bar顯示所有記錄的總數(shù)。
- caption :設(shè)置Grid表格的標(biāo)題,如果未設(shè)置,則標(biāo)題區(qū)域不顯示。
- rowNum :用于設(shè)置Grid中一次顯示的行數(shù),默認(rèn)值為20。正是這個(gè)選項(xiàng)將參數(shù)rows(prmNames中設(shè)置的)通過(guò)url選項(xiàng)設(shè)置的鏈接傳遞到Server。注意如果Server返回的數(shù)據(jù)行數(shù)超過(guò)了rowNum的設(shè)定,則Grid也只顯示rowNum設(shè)定的行數(shù)。
- rowList :一個(gè)數(shù)組,用于設(shè)置Grid可以接受的rowNum值。例如[10,20,30]。
- colNames :字符串?dāng)?shù)組,用于指定各列的題頭文本,與列的順序是對(duì)應(yīng)的。
- colModel :最重要的數(shù)組之一,用于設(shè)定各列的參數(shù)。(稍后詳述)
- prmNames :這是一個(gè)數(shù)組,用于設(shè)置jqGrid將要向Server傳遞的參數(shù)名稱。(稍后詳述)
- jsonReader :這又是一個(gè)數(shù)組,用來(lái)設(shè)定如何解析從Server端發(fā)回來(lái)的json數(shù)據(jù)。(稍后詳述)
2.1 prmNames選項(xiàng)
prmNames是jqGrid的一個(gè)重要選項(xiàng),用于設(shè)置jqGrid將要向Server傳遞的參數(shù)名稱。其默認(rèn)值為:
prmNames : {
page:"page", // 表示請(qǐng)求頁(yè)碼的參數(shù)名稱
rows:"rows", // 表示請(qǐng)求行數(shù)的參數(shù)名稱
sort: "sidx", // 表示用于排序的列名的參數(shù)名稱
order: "sord", // 表示采用的排序方式的參數(shù)名稱
search:"_search", // 表示是否是搜索請(qǐng)求的參數(shù)名稱
nd:"nd", // 表示已經(jīng)發(fā)送請(qǐng)求的次數(shù)的參數(shù)名稱
id:"id", // 表示當(dāng)在編輯數(shù)據(jù)模塊中發(fā)送數(shù)據(jù)時(shí),使用的id的名稱
oper:"oper", // operation參數(shù)名稱
editoper:"edit", // 當(dāng)在edit模式中提交數(shù)據(jù)時(shí),操作的名稱
addoper:"add", // 當(dāng)在add模式中提交數(shù)據(jù)時(shí),操作的名稱
deloper:"del", // 當(dāng)在delete模式中提交數(shù)據(jù)時(shí),操作的名稱
subgridid:"id", // 當(dāng)點(diǎn)擊以載入數(shù)據(jù)到子表時(shí),傳遞的數(shù)據(jù)名稱
npage: null,
totalrows:"totalrows" // 表示需從Server得到總共多少行數(shù)據(jù)的參數(shù)名稱,參見(jiàn)jqGrid選項(xiàng)中的rowTotal
}
2.2 jsonReader選項(xiàng)
jsonReader是jqGrid的一個(gè)重要選項(xiàng),用于設(shè)置如何解析從Server端發(fā)回來(lái)的json數(shù)據(jù),如果Server返回的是xml數(shù)據(jù),則對(duì)應(yīng)的使用xmlReader來(lái)解析。jsonReader的默認(rèn)值為:
jsonReader : {
root: "rows", // json中代表實(shí)際模型數(shù)據(jù)的入口
page: "page", // json中代表當(dāng)前頁(yè)碼的數(shù)據(jù)
total: "total", // json中代表頁(yè)碼總數(shù)的數(shù)據(jù)
records: "records", // json中代表數(shù)據(jù)行總數(shù)的數(shù)據(jù)
repeatitems: true, // 如果設(shè)為false,則jqGrid在解析json時(shí),會(huì)根據(jù)name來(lái)搜索對(duì)應(yīng)的數(shù)據(jù)元素(即可以json中元素可以不按順序);而所使用的name是來(lái)自于colModel中的name設(shè)定。
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {
root:"rows",
repeatitems: true,
cell:"cell"
}
}
假如有下面一個(gè)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日"}]}
其對(duì)應(yīng)的jsonReader為:jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注:cell、id在repeatitems為true時(shí)可以用到,即每一個(gè)記錄是由一對(duì)id和cell組合而成,即可以適用另一種json結(jié)構(gòu)。援引文檔中的例子:
repeatitems為true時(shí):
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
json結(jié)構(gòu)為:
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的name,只要值就OK了,但是需要保持對(duì)應(yīng)
{"id" :"2", "cell" :["cell21", "cell22", "cell23"]},
...
]
}
repeatitems為false時(shí):
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords",
repeatitems: false,
id: "0"
},
...
});
json結(jié)構(gòu)為:
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 數(shù)據(jù)中需要各列的name,但是可以不按列的順序
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要選項(xiàng)
colModel也有許多非常重要的選項(xiàng),在使用搜索、排序等方面都會(huì)用到。這里先只說(shuō)說(shuō)最基本的。
- name :為Grid中的每個(gè)列設(shè)置唯一的名稱,這是一個(gè)必需選項(xiàng),其中保留字包括subgrid、cb、rn。
- index :設(shè)置排序時(shí)所使用的索引名稱,這個(gè)index名稱會(huì)作為sidx參數(shù)(prmNames中設(shè)置的)傳遞到Server。
- label :當(dāng)jqGrid的colNames選項(xiàng)數(shù)組為空時(shí),為各列指定題頭。如果colNames和此項(xiàng)都為空時(shí),則name選項(xiàng)值會(huì)成為題頭。
- width :設(shè)置列的寬度,目前只能接受以px為單位的數(shù)值,默認(rèn)為150。
- sortable :設(shè)置該列是否可以排序,默認(rèn)為true。
- search :設(shè)置該列是否可以被列為搜索條件,默認(rèn)為true。
- resizable :設(shè)置列是否可以變更尺寸,默認(rèn)為true。
- hidden :設(shè)置此列初始化時(shí)是否為隱藏狀態(tài),默認(rèn)為false。
- formatter :預(yù)設(shè)類型或用來(lái)格式化該列的自定義函數(shù)名。常用預(yù)設(shè)格式有:integer、date、currency、number等(具體參見(jiàn)文檔 )。
三、 注意事項(xiàng)
1. 動(dòng)態(tài)改變Add Form或者Edit Form中的select的內(nèi)容,如:改變下圖中的Comparator下拉中的內(nèi)容。
$("#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在每次點(diǎn)擊編輯的時(shí)候都會(huì)執(zhí)行。initComparator的作用是通過(guò)ajax獲取數(shù)據(jù),然后利 用$("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });來(lái)設(shè)置Comparator下拉中的內(nèi)容。其中valueString的格式如下’ equal to: equal to; not equal to: not equal to’。鍵值之間用冒號(hào)隔開(kāi),2項(xiàng)之間用分號(hào)隔開(kāi)。注意:把recreateForm設(shè)為true,否則'setColProp'只在第一次調(diào)用時(shí)有效。
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到數(shù)據(jù)條數(shù)。
3. jQuery("#list_d").clearGridData();清空數(shù)據(jù)。
4. jQuery("#list").getCell(ids,"Key");獲取第ids行的key列。
5. $("#list").jqGrid('setSelection', "1");選中第一行。放在loadComplete:中在gird加載完成的時(shí)候自動(dòng)選中第一行。 loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 對(duì)于像1中的可編輯的字段,可以設(shè)定rule,參見(jiàn)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');
復(fù)雜的表格可以參考jquery grid demo網(wǎng)站 :