支持多种类型的数据集合作为数据源
jqGrid可以绑定三种类型的数据:XML,JSON和数组。使用不同的数据类型主要是设置datatype属性,它的值分别为'xml','json','local'(数组)
$("#grid1").jqgrid( ........ datatype: "xml", ........ );
下面则列举各种数据类型的格式
XML格式：
<rows> <page></page> <total></total> <records></records> <row> <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', width: 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', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, {name:'name',index:'name', width:100, editable:true}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], pager: "#plist48", viewrecords: true, sortname: 'name', grouping:true, groupingView : { groupField : ['name'] }, caption: "Grouping Array Data" });
还有复杂一点的排序，那还是上jqGrid Demos看看吧！
筛选
jqGrid的筛选并不是在grid里面的内容进行筛选，其实是对数据库里的数据筛选查询。
html:
<table></table> <div></div>
javascript: