jquery easyui datagrid 實現行分組

本來官網上是有行分組demo的，但是需要引入datagrid-groupview.js，而這個js不在免費版裏面。

後來在demo-propertygrid文件夾裏面看了三個類似的案例，就結合了其中兩個來實現行分組。具體如下：

1、demo：customcolumns.html借鑑了裏面顯示行的方法：

<table class="easyui-propertygrid" style="width:300px" data-options="
url: 'propertygrid_data1.json',
method: 'get',
showGroup: true,
scrollbarSize: 0,
columns: mycolumns

onLoadSuccess:function(data){
    $('#dg').datagrid('collapseGroup');
}//正式默認打開時摺疊的函數
">
</table>

<script>
var mycolumns = [[

//官網的demo默認只有name和value兩列,大家可以根據需要，自行定義
    {field:'name',title:'MyName',width:100,sortable:true},
    {field:'value',title:'MyValue',width:100,resizable:false}
        ]];
</script>

2、demo：groupformat.html借鑑瞭如何在前端分組顯示信息

<table class="easyui-propertygrid" style="width:300px" data-options="
url: 'propertygrid_data1.json',
method: 'get',
showGroup: true,
scrollbarSize: 0,
groupFormatter: groupFormatter
">
</table>

<script>
function groupFormatter(fvalue, rows){
return fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>';
}//正式用來定義前端分組顯示的信息
</script>

3、在數據源裏面專門建立一個用來分組的字段，字段的key必須爲group：value爲你要用來分組的字段值

map.put("group",  rs.getString("description_"));//前端分組用

最後結果：