Layui合并单元格的一种方案

Layui合并单元格，合并列

时间：20191219

背景

场景1

一张数据表中，某一列相同的数据需要合并展示

需求

1. 前端使用layui框架
2. 需要将一列中相同的数据进行单元格合并
3. 性能搞

方案

1. 第一步：使用原生layui生成数据表
2. 第二步：遍历数据表
3. 第三步：校验上一单元格的数据与下一个单元格数据是否相同，相同保留第一格，删除其他格子
4. 第四步：计算保留单元格需要跨多少行
5. 第五步：为保留单元格设置rowspan属性

实现

合并单元格的方法

/**
 * 单元格合并
 * @param table 要进行操作的表
 * @param column 要合并的列名称
 */
function rowspan(table, column) {
    debugger;
    // debugger;
    //获取到表格
    table = $("#" + table + "-content");
    //找到所有格子
    let tds = table.find('td[data-field=\'' + column + '\']');
    //操作第几个格子
    let actionTd;
    //合并个数
    let rowspanNum = 0;
    //上一个格子数据
    let preValue = "";
    //待删除数据
    let deleteTd = [];
    for (let i = 0; i <= tds.length; i++) {
        let td;
        let tdValue;
        //针对最后一行，不能合并单元格
        if (i!==tds.length){
            //当前操作的数据格
            td = $(tds[i]);
            //获取每个格子的数据
            tdValue = $(td.find('div.layui-table-cell')).text();
        }
        //如果当前数据和上一个数据相等
        if (tdValue === preValue) {
            //合并个数自增
            rowspanNum++;
            //将当前数据格，放入到待删除数据中
            deleteTd.push(td);
        } else {
            //不相等
            //检查待删除数据中是否有数据，检查数据长度
            if (deleteTd.length >= 1) {
                //删除数据
                for (let j = 0; j < deleteTd.length; j++) {
                    deleteTd[j].remove();
                }
                //合并数据
                actionTd.attr("rowspan", rowspanNum+1);
                //清空数据
                actionTd = null;
                rowspanNum = null;
                preValue = "";
                deleteTd = [];
            }
            //保存第一次出现数据的格子
            actionTd = td;
        }
        //更新preValue
        preValue = tdValue;
    }
}

使用方法

table.render({
    elem: '#LAY-table',
    url: urls.list,
    cols: [[

    ]],

    done: function (resp) {
       //在这里使用方法 'LAY-table'为id
        rowspan('LAY-table','filedName');
        rowspan('LAY-table','filedName');
    }
});

缺点

1. layui使用fixed属性时，需要做特殊处理
2. 一经使用方法，指定列中所有相同数据都会被合并，不支持指定行合并（例：每两行相同的数据进行合并）

写在最后

layui社区中有很多实现单元格合并的方法，可以进行参考，同时，layui也提供了单元格合并插件，但是我在接手这个需求的时候，没有找到插件，所以花时间初略的实现了这个功能，希望能给大家提供一些帮助