引入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');
