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_"));//前端分组用

最后结果：