一?jqGrid的加载?/strong>
1.引用相关头文?/strong>
引入CSSQ?
<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" />
引入JSQ?
<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 UIQ所以，此处需要导入UI相关js和css。另外grid.locale-en.jsq个语言文g必须在jquery.jqGrid.min.js之前加蝲Q否则会出问题?
2.jqgrid加入面?/strong>
ҎjqGrid的文档，要想生成一个jqGridQ最直接的方法就是：
$("#list").jqGrid(options);
其中list是页面上的一个tableQ?lt;table id="list"></table>
下面是一个简单的例子Q?
<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参考，可以讉KjqGrid文档关于option的章节（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:optionsQ。其中有几个是比较常用的Q重点介l一下：
- url QjqGrid控g通过q个参数得到需要显C的数据Q具体的q回值可以XML也可以是Json?
- datatype Q这个参数用于设定将要得到的数据cd。类型包括：json 、xml、xmlstring、local、javascript、function?
- mtype : 定义使用哪种Ҏ发vhQGET或者POST?
- height QGrid的高度，可以接受数字?倹{autoQ默认gؓ150?
- width QGrid的宽度，如果未设|，则宽度应为所有列宽的之和Q如果设|了宽度Q则每列的宽度将会根据shrinkToFit选项的设|，q行讄?
- shrinkToFit Q此选项用于Ҏwidth计算每列宽度的算法。默认gؓtrue。如果shrinkToFit为true且设|了width|则每列宽度会Ҏ width成比例羃放；如果shrinkToFit为false且设|了width|则每列的宽度不会成比例羃放，而是保持原有讄Q而Grid会?水^滚动条?
- autowidth Q默认gؓfalse。如果设为trueQ则Grid的宽度会Ҏ父容器的宽度自动重算。重仅发生在Grid初始化的阶段Q如果当父容器尺寸变化了Q同时也需要变化Grid的尺寸的话，则需要在自己的代码中调用setGridWidthҎ来完成?
- pager Q定义页码控制条Page BarQ在上面的例子中是用一个div(<div id=”pager”></div>)来放|的?
- sortname Q指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端?
- viewrecords Q设|是否在Pager Bar昄所有记录的L?
- caption Q设|Grid表格的标题，如果未设|，则标题区域不昄?
- rowNum Q用于设|Grid中一ơ显C的行数Q默认gؓ20。正是这个选项参数rowsQprmNames中设|的Q通过url选项讄的链接传递到Server。注意如果Serverq回的数据行数超q了rowNum的设定，则Grid也只昄rowNum讑֮的行数?
- rowList Q一个数l，用于讄Grid可以接受的rowNum倹{例如[10,20,30]?
- colNames Q字W串数组Q用于指定各列的题头文本Q与列的序是对应的?
- colModel Q最重要的数l之一Q用于设定各列的参数。（E后详述Q?
- prmNames Q这是一个数l，用于讄jqGrid要向Server传递的参数名称。（E后详述Q?
- jsonReader Q这又是一个数l，用来讑֮如何解析从Server端发回来的json数据。（E后详述Q?/li>
2.1 prmNames选项
prmNames是jqGrid的一个重要选项Q用于设|jqGrid要向Server传递的参数名称。其默认gؓQ?strong>
prmNames : {
page:"page", // 表示h늠的参数名U?
rows:"rows", // 表示h行数的参数名U?
sort: "sidx", // 表示用于排序的列名的参数名称
order: "sord", // 表示采用的排序方式的参数名称
search:"_search", // 表示是否是搜索请求的参数名称
nd:"nd", // 表示已经发送请求的ơ数的参数名U?
id:"id", // 表示当在~辑数据模块中发送数据时Q用的id的名U?
oper:"oper", // operation参数名称
editoper:"edit", // 当在edit模式中提交数据时Q操作的名称
addoper:"add", // 当在add模式中提交数据时Q操作的名称
deloper:"del", // 当在delete模式中提交数据时Q操作的名称
subgridid:"id", // 当点M载入数据到子表时Q传递的数据名称
npage: null,
totalrows:"totalrows" // 表示需从Server得到d多少行数据的参数名称Q参见jqGrid选项中的rowTotal
}
2.2 jsonReader选项
jsonReader是jqGrid的一个重要选项Q用于设|如何解析从Server端发回来的json数据Q如果Serverq回的是xml数据Q则对应的用xmlReader来解析。jsonReader的默认gؓQ?
jsonReader : {
root: "rows", // json中代表实际模型数据的入口
page: "page", // json中代表当前页码的数据
total: "total", // json中代表页码L的数?
records: "records", // json中代表数据行L的数?
repeatitems: true, // 如果设ؓfalseQ则jqGrid在解析jsonӞ会根据name来搜索对应的数据元素Q即可以json中元素可以不按顺序）Q而所使用的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 q???},{"SalesReasonID":"2","Name":"On Promotion","ReasonType":"Promotion","ModifiedDate":"1998q???}, {"SalesReasonID":"3","Name":"Magazine Advertisement","ReasonType":"Marketing","ModifiedDate":"1998q???}, {"SalesReasonID":"4","Name":"Television Advertisement","ReasonType":"Marketing","ModifiedDate":"1998q???}, {"SalesReasonID":"5","Name":"Manufacturer","ReasonType":"Other","ModifiedDate":"1998 q???}]}
其对应的jsonReader为：jsonReader: {
root: "griddata",
total: "totalpages",
page: "currpage",
records: "totalrecords",
repeatitems: false
}
注：cell、id在repeatitems为true时可以用刎ͼx一个记录是׃对id和celll合而成Q即可以适用另一Ujsonl构。援引文档中的例子：
repeatitems为trueӞ
jQuery("#gridid").jqGrid({
...
jsonReader : {
root:"invdata",
page: "currpage",
total: "totalpages",
records: "totalrecords"
},
...
});
jsonl构为：
{
"totalpages": "xxx",
"currpage": "yyy",
"totalrecords": "zzz",
"invdata" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]}, // cell中不需要各列的nameQ只要值就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"
},
...
});
jsonl构为：
{
"totalpages" : "xxx",
"currpage" : "yyy",
"totalrecords" : "zzz",
"invdata" : [
{"invid" : "1","invdate":"cell11", "amount" :"cell12", "tax" :"cell13", "total" :"1234", "note" :"somenote"}, // 数据中需要各列的nameQ但是可以不按列的顺?
{"invid" : "2","invdate":"cell21", "amount" :"cell22", "tax" :"cell23", "total" :"2345", "note" :"some note"},
...
]
}
2.3 colModel的重要选项
colModel也有许多非常重要的选项Q在使用搜烦、排序等斚w都会用到。这里先只说说最基本的?
- name QؓGrid中的每个列设|唯一的名Uͼq是一个必需选项Q其中保留字包括subgrid、cb、rn?
- index Q设|排序时所使用的烦引名Uͼq个index名称会作为sidx参数QprmNames中设|的Q传递到Server?
- label Q当jqGrid的colNames选项数组为空Ӟ为各列指定题头。如果colNames和此w为空Ӟ则name选项g成ؓ题头?
- width Q设|列的宽度，目前只能接受以px为单位的数|默认?50?
- sortable Q设|该列是否可以排序，默认为true?
- search Q设|该列是否可以被列ؓ搜烦条gQ默认ؓtrue?
- resizable Q设|列是否可以变更寸Q默认ؓtrue?
- hidden Q设|此列初始化时是否ؓ隐藏状态，默认为false?
- formatter Q预讄型或用来格式化该列的自定义函数名。常用预设格式有Qinteger、date、currency、number{（具体参见文档 Q?/li>
三?注意事项
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();
}
}Q?/edit
{},//add
{}//del
Q?
beforeInitData, beforeShowForm在每ơ点ȝ辑的时候都会执行。initComparator的作用是通过ajax获取数据Q然后利 ?("#list_d").jqGrid('setColProp', 'Comparator', { editoptions: { value: valueString} });来设|Comparator下拉中的内容。其中valueString的格式如?#8217; equal to: equal to; not equal to: not equal to’。键g间用冒号隔开Q?之间用分号隔开。注意：把recreateForm设ؓtrueQ否?setColProp'只在W一ơ调用时有效?
2. var rowNum = parseInt($(this).getGridParam("records"), 10); 得到数据条数?
3. jQuery("#list_d").clearGridData();清空数据?
4. jQuery("#list").getCell(ids,"Key");获取Wids行的key列?
5. $("#list").jqGrid('setSelection', "1");选中W一行。放在loadCompleteQ中在gird加蝲完成的时候自动选中W一行?loadComplete:function(data){$("#list").jqGrid('setSelection', "1");
}
6. 对于?中的可编辑的字段Q可以设定ruleQ参?a >http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editrules
7. 修改OptionQ以URLZ
jQuery("#list_d").jqGrid('setGridParam',{url:"xxx.aspx",page:1}).trigger('reloadGrid');
复杂的表格可以参考jquery grid demo|站 Q?
]]>