jquery学习笔记---jqGrid学习笔记 完整整理

 

一、jqGrid的加载。

1.引用相关头文件

引入CSS：

<linkhref="Scripts/jquery-ui-1.8.1.custom.css"rel="stylesheet"type="text/css"/>

<linkhref="Scripts/ui.jqgrid.css"rel="stylesheet"type="text/css"/>

引入JS：

<scriptsrc="Scripts/jquery-1.5.1.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery-ui.min.js"type="text/javascript"></script>

<scriptsrc="Scripts/grid.locale-en.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery.jqGrid.min.js"type="text/javascript"></script>

因为jqGrid3.6及以后的版本集成了jQueryUI，所以，此处需要导入UI相关js和css。另外grid.locale-en.js这个语言文件必须在jquery.jqGrid.min.js之前加载，否则会出问题。

2.将jqgrid加入页面中

根据jqGrid的文档，要想生成一个jqGrid，最直接的方法就是：

$("#list").jqGrid(options);

其中list是页面上的一个table：<tableid="list"></table>

下面是一个简单的例子：

<scripttype="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：定义页码控制条PageBar，在上面的例子中是用一个div(<divid=”pager”></div>)来放置的。

sortname：指定默认的排序列，可以是列名也可以是数字。此参数会在被传递到Server端。

viewrecords：设置是否在PagerBar显示所有记录的总数。

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.1prmNames选项

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.2jsonReader选项

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":"OnPromotion","ReasonType":"Promotion","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"3","Name":"Magazine
Advertisement","ReasonType":"Marketing","ModifiedDate":"1998年6月1日"},{"SalesReasonID":"4","Name":"TelevisionAdvertisement","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":"somenote"},  

                 ...  

    ]  

}  



2.3colModel的重要选项


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.动态改变AddForm或者EditForm中的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的格式如下’
equalto:equalto;notequalto:notequalto’。键值之间用冒号隔开，2项之间用分号隔开。注意：把recreateForm设为true，否则'setColProp'只在第一次调用时有效。

2.varrowNum=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');