jqGrid的分組功能（grouping）
阿新 • • 發佈：2018-12-03
jqGrid簡介：
jqGrid是基於jquery的表格外掛；優點是輕量級。
jqGrid分組：
再簡單的分組就是開啟jqgrid的分組功能：在colMolder中設定引數grouping:true以及groupingView:{groupField:"sex"}（按照性別分組）。
往後還有其他的一些屬性值：groupColumnShow : [true]，groupText : ['<b>{0} - {1} Item(s)</b>']， groupSummary : [true] ... ...
程式碼如下
<html >
<head>
<title>jqGrid 例項</title> </head> <body> <table id="list48"></table> <div id="plist48"></div> </body> <script> $(function(){ pageInit(); }); function pageInit(){ 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"} ]; 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'],
groupSummary : [true],//是否開啟彙總頁尾 groupColumnShow : [true],//是否展示分組列 groupText : ['<b>{0}</b>'],//組名的展示文字 groupCollapse : false, }, caption: "Grouping Array Data" }); } </script> </html>