Lay UI 表格数据分组树形展示

废话不说，直接上链接：

gitee地址：grouptable4layui: 基于layui的分组表格控件

csdn下载地址：JS_layui数据表格分组展示控件

虽然layui已经下架了，但是相信还是有很多伙伴在使用，但是layui table表格没有分组显示功能。grouptable对原layui table控件进行了扩展，增加了分组展示功能。

效果图如下：

页面代码如下：

    layui.config({
        base: context_path + 'plugins/layuiadmin/' //静态资源所在路径
    }).extend({
        grouptable: 'grouptable/grouptable'
    }).use(['table', 'form', 'layer', 'grouptable'], function () {

        var table = layui.table;
        var grouptable = layui.grouptable;
        ......
        grid = grouptable.render({
            ......
            defaultClose: false,//默认收拢
            groupLinkage: false,//展开时不自动展开下级
            groupCols: [//分组配置
                {field:"projUseDept",name:"项目甲方",tpl:"[#name#] = #value# <span style='color:red;'>(#count#)</span>"},
                {field:"projType",name:"项目状态",tpl:"[#name#] = #value# <span style='color:red;'>(#count#)</span>",valueFormat:function(v){
                    var map = {"601678460235d2e84aa45656690a4f1c":"正常","41E0DDB12A544C5D936B26CF5154619E":"审批中"};
                    return map.hasOwnProperty(v)?map[v]:v;
                }}
            ],
            cols: [
                ......
            ],
            ......
        });
        ......
    });

看一下文档注释，写的非常详细：

/**
 * name：grouptable【layui分组表格控件】
 * author：白西龙
 * description：
 *   layui分组表格控件，用于实现页面数据分组，并以树形结构显示
 *   1、支持多级分组；
 *   2、支持自定义分组标题；
 *   3、支持分组数据行数显示；
 *   4、所有行数据会增加属性：
 *      $treetype as [d|g] : 数据类型（d:数据;g:分组）
 *      $treeid : 数据分组ID（分组：父ID+id；数据：父ID+行号[不连续]）
 *      $treepid : 父级分组ID（一级分组父ID为$ROOT）
 *      $index4all : 数据行号（从1开始，分组行不计数）
 *      $index4group : 组内数据行号（从1开始，分组行不计数）
 *      $treedepth : 属性结构层级（一级分组层级为0）
 *   5、支持展开全部expandAll/收拢全部foldAll
 * notice：
 *   1、不支持多级表头【未解决】；
 *   2、不支持懒加载【未解决】；
 *   3、不支持分页【未解决】；
 *   4、fixed-left显示问题：如果fixed列宽不够，则数据表中的分组描述语言会显示出来【已优化】；
 *   5、fixed表格不支持鼠标滚轮【已优化】；
 *   6、分组信息合并整行时，fixed-right不会合并【已优化】；
 *   7、分组信息合并整行时速度有点慢【已优化】；
 *   8、如果有numbers序号列，则第一列必须时序号列，其他列也可再增加【已优化】；
 *   9、不支持单元格换行显示【未解决】；
 *   10、不支持统计行【未解决】；
 *   11、fixed-left显示问题：拉宽fixed-left列后，分组标题无法自动计算宽度【已优化】；
 *   12、表格第一列用于分组显示，不支持templet【已优化】；
 * usage：
 *   1、引入js文件
 *   2、引入grouptable layui.use([grouptable])
 *   3、组织参数调用表格render方法 layui.grouptable.render(config typeof Object)
 *     config.defaultClose = true | false : 默认收起所有分组
 *     config.groupLinkage = true | false : 展开时是否同时展开下级
 *     config.groupCols = [groupInfo typeof Object ...] typeof Array : 分组信息定义
 *         groupInfo.field typeof String : 分组列名
 *         groupInfo.name typeof String : 分组描述
 *         groupInfo.tpl typeof String : 分组标题模板（支持html，内置三个转换项）
 *             #name# : 分组描述替换关键字
 *             #value# : 分组值替换关键字（如果定义valueFormat，则替换为转换结果）
 *             #count# : 分组数据行数
 *         groupInfo.valueFormat typeof Function : 分组值转换方法（function(v){return f(v) typeof String}）
 *             v typeof String | Any : 分组值
 *             f(v) typeof String : 分组值转换后结果
 * example：
 *   projectGrid = grouptable.render({
 *      ...
 *      defaultClose: true,//默认收拢
 *      groupLinkage: false,//展开时不自动展开下级
 *      groupCols: [//分组配置
 *              {field:"projUseDept",name:"项目甲方",tpl:"[#name#] = #value# (<span style='color:red;'>#count#</span>)"},
 *              {field:"projType",name:"项目状态",tpl:"[#name#] = #value# (<span style='color:red;'>#count#</span>)",valueFormat:function(v){
 *                  var map = {"601678460235d2e84aa45656690a4f1c":"正常","41E0DDB12A544C5D936B26CF5154619E":"审批中"};
 *                  return map.hasOwnProperty(v)?map[v]:v;
 *              }}
 *      ],
 *      ...
 *   })
 *
 **/

 光看这份注释，已经了解基本使用方法了，接下来说下功能实现方案：

1、读取数据后，遍历数据信息，组织分组信息保存，并为数据增加树形分组相关属性；

2、重新定义所有序号列（type="numbers"），只为数据行加序号；

3、将添加了分组数据的数据用于加载表格数据；

4、加载表格完成后，为分组行合并整行单元格；

5、通过dom事件为fixed表格增加同步滚动方法；

6、参考treetable实现的分组展示功能；