jgGrid的各种用法：
支持多种类型的数据集合作为数据源
jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组)
$("#grid1").jqgrid( ........ datatype: "xml", ........ );
下面则列举各种数据类型的格式
XML格式：
复制代码 <rows> <page></page> <total></total> <records></records> <row id="rowid"> <cell>value1</cell> ......... <cell>valueN</cell> </row> </rows>
复制代码
json格式
{"page":"页号","rows":[{name1:'value1',name2:'value2',.....nameN:'valueN'},.... {....} ], "total":记录数,"records":总记录数}
数组格式
复制代码 var datas=[ {name1:'value1',name2:'value2',..... nameN:'valueN'}, .... {....} ];
//把数据添加到jqgrid里 for (var i = 0; i <= mydata.length; i++) { jQuery("#grid1").jqGrid('addRowData', i + 1, mydata[i]); }
复制代码
或者设置data属性
$("#grid1").jqgrid( ...... data:mydata, datatype:'local', ....... );
统计运算的功能
将footerrow设为true,绑定gridComplete事件。
复制代码 $("#grid1").jqgrid( ...... footerrow: true, gridComplete: completeMethod, ....... );
function completeMethod() { var sum_amount=$("#grid1").getCol('amount',false,'sum'); var sum_tax=$("#grid1").getCol('tax',false,'sum'); var sum_total=$("#grid1").getCol('total',false,'sum'); $("#grid1").footerData('set', { name: '合计:', amount: sum_amount, tax: sum_tax, total: sum_total }); }
复制代码
统计时利用getCol方法，第一个参数为colMode的name值，第二个设为false，否则会返回一个数组而不是但一个数据，第三个是设置统计方式，有'sum','avg'和'count'。
排序
只要单击列的标题，就可以对该列进行升序或降序的排序。设置该列是否允许排序，在列的属性里设置sortable，同时对于不同的数据类型，也需要设置其相应的排序类型sorttype，类型有int/integer 整型,float/number/currency 浮点型，date 日期，text 文本，function 定义函数来实现自定的排序规则。
复制代码
$("#grid1").jqgrid( ........ colModel: [
......... { name: 'id', index: 'id', 60, myexport: true, editable: true , sorttype: "int", sortable: true}, .............
], ........ );
复制代码
分组
最简单的分组
复制代码 var mydata = [ {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} , {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; jQuery("#list48").jqGrid({ data: mydata, datatype: "local", height: 'auto', rowNum: 30, rowList: [10,20,30], colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', 60, sorttype:"int"}, {name:'invdate',index:'invdate', 90, sorttype:"date", formatter:"date"}, {name:'name',index:'name', 100, editable:true}, {name:'amount',index:'amount', 80, align:"right",sorttype:"float", formatter:"number", editable:true}, {name:'tax',index:'tax', 80, align:"right",sorttype:"float", editable:true}, {name:'total',index:'total', 80,align:"right",sorttype:"float"}, {name:'note',index:'note', 150, sortable:false} ], pager: "#plist48", viewrecords: true, sortname: 'name', grouping:true, groupingView : { groupField : ['name'] }, caption: "Grouping Array Data" });
复制代码
还有复杂一点的排序，那还是上jqGrid Demos看看吧！
筛选
jqGrid的筛选并不是在grid里面的内容进行筛选，其实是对数据库里的数据筛选查询。
html:
<table id="s2list"></table> <div id="s2pager"></div>
javascript:
复制代码 jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false}); jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s', onClickButton:function(){ mygrid[0].toggleToolbar() } }); jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh', onClickButton:function(){ mygrid[0].clearToolbar() } }); jQuery("#s3list").jqGrid('filterToolbar');
复制代码
增删改查工具栏及分页栏 jqGrid附带了分页栏，在分页栏上可以添加增加，修改，删除以及查询按钮。
在html多添加一个层，这个层就存放分页栏：
<div id="pager"></div>
复制代码 $("#grid1").jqgrid( ...... pager:"#pager", //通过这属性还可以设置可选的页面大小 rowList: [10, 20, 30], ....... ); //这里的 edit,add等就是对应编辑新增等按钮，通过设置布尔值来决定是否显示 jQuery("#grid1").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: true, refresh: true}); //或者用这种形式
jQuery("#grid1").jqGrid('navGrid', '#pager', {}, //options {height: 280, reloadAfterSubmit: false }, // edit options {height: 280, reloadAfterSubmit: false }, // add options {reloadAfterSubmit: false }, // del options {} // search options );
复制代码
记得要在colModel里给可供编辑的列的editable赋值为true，才可以编辑。
分页读取数据
既然上面已提及到分页，下面则介绍另一种分页方式，通过滚动条进行翻页。在这种分页方式中，数据库的所有数据并非一下子读取出来填充到grid中，而是通过滚动条的位置得出当前浏览到的哪一页数据，才从数据库读取那部分的数据。
复制代码 $("#grid1").jqgrid( ...... //设置了这个才会根据滚动分页读取数据 scroll: 1, //设置页面的大小 rowNum: 10, ....... );
复制代码
下面的例子只是用到本地的数据，同样也是实现了滚动翻页的效果
滚动条翻页
父子表
通过以下设置可使用子表
复制代码 $("#grid1").jqgrid( ...... //启用子表 subGrid : true, subGridUrl: '............', //设置子表的属性 subGridModel: [{ name : ['name1','name2',......,'nameN'], width : [width1,width2,.....,widthN] } ], ....... );
复制代码
这里子表的设置只是最基本的，更多属性的资料可参阅 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid
Get/Set 单元格的值
获取某个单元格的值就调用getCell(rowid, iCol) 。iCol既可以是当前列在colModel中的位置索引也可以是name值。注意：在编辑行或者单元格时不能使用此方法，此时返回的并不是改变的值，而是原始值。
设置某个单元格的值就调用setCell(rowid,colname, data, class, properties)。rowid：当前行id；colname：列名称，也可以是列的位置索引，从0开始；data：改变单元格的内容，如果为空则不更 新；class：如果是string则会使用addClass方法将其加入到单元格的css中，如果是array则会直接加到style属性中；properties：设置单元格属性colModel。
当然也可以Get/Set 行或者列，在这里可查阅更多get/set/add的方法http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
数据验证
通过设置colModel的editrules属性，可以对输入的数据进行验证
复制代码 jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editrules:{edithidden:true, required:true....}, editable:true }, ... ] ... });
复制代码
下面则是可用的验证选项
选项
类型
描述
edithidden boolean 这个选项只适用于表单编辑模块。默认情况下隐藏的字段是不可编辑的。如果该字段隐藏在grid中并且edithidden设置为true，当调用增加或编辑方法时该字段就可以编辑。 required boolean （true或false）如果设置为true，该值将被检查，如果为空，错误信息将被显示。 number boolean （true或false）如果设置为true，该值将被检查，如果这不是一个数字，一个错误信息将被显示。 integer boolean （true或false）如果设置为true，该值将被检查，如果这不是一个整数，错误信息将被显示。 minValue number(integer) 如果设置了值，单元格的值将被检查，如果单元格的值小于这个值，就会显示错误信息。 maxValue number(integer) 如果设置了值，单元格的值将被检查，如果单元格的值大于这个值，就会显示错误信息。 email boolean 如果设置为true，则该值将被检查，如果这是无效的电子邮箱地址，将显示一条错误消息。 url boolean 如果设置为true，则该值将被检查，如果这不是有效的URL，将显示一条错误消息。 date boolean 如果设置为true，则该值将被检查，如果不是有效的日期，将显示一条错误消息。 time boolean 如果设置为true，则该值将被检查，如果这不是有效的时间，错误信息将被显示。目前只支持hh：mm格式和可选的AM / PM结束时 custom boolean 如果设置为true，允许通过自定义功能自定义检查规则的定义。 custom_func function 当custom设置为true时，function一定要使用。传递到此函数的参数是value,该值一定要被检查和命名。该函数一定要返回由以下参数组成的数组:1，true/false。2，返回给用户的错误信息。例如[false,"请输入正确的数据"]。
设置条带状的列
复制代码 jQuery("#ghcs").jqGrid('setGroupHeaders', { //设置列头是否启用colSpan效果 useColSpanStyle: false, groupHeaders:[ { startColumnName: 'colName', //合并列组的第一个列名 numberOfColumns: number, //合并列的数量 titleText: 'title' //合并列的标题 }, ........
] }
复制代码
编辑器
jqGrid的模板列自带了一些很基本的编辑器，包括：'text'单行文本框, 'textarea'多行文本框, 'select'下拉框, 'checkbox'复选框, 'password'密码框, 'button'按钮, 'image'图片按钮, 'file'文件上传框 以及'custom'自定义编辑器。
在colModel里设置edittype则可
复制代码 jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'price', ..., editable:true, edittype:'text',editoptions: {size:10, maxlength: 15}....}, ... ] ... });
复制代码
其中editoption是对编辑器的一些设置，文本框就可以设置size,maxlength等；复选框可设置value ；
ditoptions: { value:"Yes:No" }
下拉框以这种形式
editoptions: { value: “val1:text1; val2:text2; val3:text3” }
更多资料参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#edittype
模板列调用其他编辑器
上面介绍的编辑器只是使用了html的表单元素而已，下面介绍的是调用插件。
复制代码 <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script type="text/javascript">
function InitDatePicker(cl) { $(cl).click(function () { WdatePicker(); }); } ....
jQuery("#grid_id").jqGrid({ ... colModel: [ ... {name:'date', ..., editable:true, edittype:'text',editoptions: {dataInit:InitDatePicker}....}, ... ] , ... });
.......
</script>
复制代码
这里调用了My97DatePicker插件作为日历编辑器。
如果想在一个模板列里放置多种控件，可以用一下方式
复制代码 jQuery("#grid_id").jqGrid({ ... afterInsertRow: function (rowid, aData) { var controls=" "; //放置在模板里的控件 ....... $("#grid_id").jqGrid('setCell', rowid, 'tag', controls); } ... });
复制代码
这个其实是在grid的单元格内通过编辑其html来实现。
模仿Excel移动选择单元格
设置单元格编辑模式后，可以通过上下左右的导航键跳到需要编辑的单元格，按回车进入编辑状态，按Esc键不保存更改内容，按回车保存更改内容
jQuery("#grid_id").jqGrid({ ... cellEdit:true, cellsubmit:'clientArray', //定义了单元格内容保存位置 默认值是'remote' ... });