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

来源:未知 责任编辑:智问网络 发表时间:2013-09-22 21:32 点击:

 

一、jqGrid的加载。

 

1.引用相关头文件

 

引入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下拉中的内容。

 

clip_image002

 

$("#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');

 

摘自 Hurry的专栏

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • 2011年度最佳 jQuery 插件
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1