layui table 合并行，可根据前列合并后列多表头亦可

1°叁柒

已于 2022-10-28 09:58:07 修改

阅读量7.2k

点赞数 2

于 2019-06-17 14:08:26 首次发布

本文链接：https://blog.csdn.net/zhu_nana/article/details/92617550

版权

本文介绍如何在layui框架中实现表格的行合并，特别是针对具有多个表头的复杂情况。通过传入特定参数，可以实现一到多行的表头合并功能。

摘要由CSDN通过智能技术生成

tableMerge.js
/**
 * @name:  子表格扩展
 * @version 1.0
 */
layui.define(['table'], function (exports) {

    var $ = layui.jquery;

    // 封装方法
    var mod = {
        /**
         * 渲染入口
         * @param myTable
         */
        render: function (myTable) {
            var tableBox = $(myTable.elem).next().children('.layui-table-box'),
                $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
                cols = myTable.cols[0], mergeRecord = {};

            for (let i = 0; i < cols.length; i++) {
                var item3 = cols[i], field=item3.field;
                if (item3.merge) {
                    var mergeField = [field];
                    if (item3.merge !== true) {
                        if (typeof item3.merge == 'string') {
                            merg