引入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\"大众 />

php的页面弹窗弹出层插件 jqgrid的应用 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');