Layui表格合并、表格折叠树

1、核心代码：

  let tableMerge = layui.tableMerge; // 引入合并的插件，插件源文件在最后
  let tableData = [{
      pid: 0,
      cid: 111,
      sortNum: 1, // 序号
      pName: '数据父元素1',
      name: '数据1',
      val: '20',
      open: true, // 子树是否展开
      hasChild: true, // 有子数据
      opt: '数据父元素1',
  }, {
      pid: 111,
      sortNum: 1,
      pName: '数据父元素1',
      cid: '1-1',
      name: '数据1-1',
      val: '1',
      opt: '数据父元素1',
      open: true,
      hasChild: false, // 无子数据
  },{
      pid: 111,
      sortNum: 1,
      pName: '数据父元素1',
      cid: '1-2',
      name: '数据1-2',
      val: '2',
      opt: '数据父元素1',
      open: true,
      hasChild: false,
  },{
      pid: 111,
      sortNum: 1,
      pName: '数据父元素1',
      cid: '1-3',
      name: '数据1-3',
      val: '3',
      opt: '数据父元素1',
      open: true,
      hasChild: false,
  },
  {
      pid: 1,
      cid: 222,
      sortNum: 2,
      pName: '数据父元素2',
      name: '数据2',
      val: '200',
      open: true, // 子跟随父
      hasChild: true,
      opt: '数据父元素2',
  },{
      pid: 222,
      cid: '2-1',
      name: '数据2-1',
      val: '10',
      sortNum: 2,
      pName: '数据父元素2',
      opt: '数据父元素2',
      open: true,
      hasChild: false,
  },{
      pid: 222,
      cid: '2-2',
      name: '数据2-2',
      val: '20',
      sortNum: 2,
      pName: '数据父元素2',
      opt: '数据父元素2',
      open: true,
      hasChild: false,
  },{
      pid: 222,
      cid: '2-3',
      name: '数据2-3',
      val: '30',
      sortNum: 2,
      pName: '数据父元素2',
      opt: '数据父元素2',
      open: true,
      hasChild: false,
  },{
      pid: 222,
      cid: '1-4',
      name: '数据2-4',
      val: '40',
      sortNum: 2,
      pName: '数据父元素2',
      opt: '数据父元素2',
      open: true,
      hasChild: false,
  }] // 假数据

// 表格渲染
var tableRender = function () {
      table.render({
          id: 'tableId',  //做刷新的时候需要用ID
          tree: {
              iconIndex: 3, // 展开图标显示在第几列
              isPidData: true, // // pid形式数据转children形式
              idName: 'cid', // 子id
              pidName: 'pid', // 父id
              openName: 'open',// 是否默认展开的字段名
              getIcon: function (d) { // 自定义图标
                  return ''
              }
          },
          elem: '#tableId',	//表格id
          page: false//是否显示分页
          , limit: 100
          ,cols: [[
			//标题栏
			{ field: "cid", hide: true },
			{
				field: "sortNum", title: "序号", align: "center", width: 80,merge: true,
				templet: function (item) {
					return item.sortNum ? '<span style="color:#1E9FFF">' + item.sortNum + '</span>': ''
				}
			},
			{ field: "pName", title: "名称", align: "center", width: 250,merge: true,},
			{ field: "name", title: "结构", align: "left", width: 250, templet: function (item) {
                          if (item.hasChild) {
                              return `
                                  ${!item.open?'<i class="layui-icon layui-icon-triangle-r" lay-event="fold_r"></i>':'<i class="layui-icon layui-icon-triangle-d" lay-event="fold_d"></i>'}
                                  ${item.name}`;
                          } else {
                              return `<div style="padding-left: 20px;">${item.open?item.name: ''}</div>`
                          }
                      } 
                  },
			{
				field: "val", title: "数据", align: "center", width: 150, templet: function (item) {
					return item.val
				}
			},
			{
				field: "opt", title: "操作", align: "center",merge: true, templet: function (item) {
					return item.sortNum ? '<div style = "color:#01AAED;cursor: pointer" lay-event="navToEchartTanChuang">详情</div>' : ''
				}
			}
		],
	],
     data:tableData,
     //数据渲染完的回调
     done: function () {
         tableMerge.render(this)
     }, 
     event: true
  })};

2、效果图：

3、tableMerge源码：

/**
 * Created by YujieYang.
 * @name:  子表格扩展
 * @author: 杨玉杰
 * @version 1.0
 */
layui.define(['table'], function (exports) {

    var $ = layui.jquery;

    // 封装方法
    var mod = {
        /**
         * 渲染入口
         * @param myTable
         */
        render: function (myTable) {
            var tableBox = $('#'+myTable.id).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 (var 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') {
                            mergeField = [item3.merge]
                        } else {
                            mergeField = item3.merge
                        }
                    }
                    mergeRecord[i] = {mergeField: mergeField, rowspan:1}
                }
            }

            $main.each(function (i) {

                for (var item in mergeRecord) {
                    if (i==$main.length-1 || isMaster(i, item)) {
                        $(this).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan);
                        $fixLeft.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan);
                        $fixRight.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan);
                        mergeRecord[item].rowspan = 1;
                    } else {
                        $(this).children('[data-key$="-'+item+'"]').remove();
                        $fixLeft.eq(i).children('[data-key$="-'+item+'"]').remove();
                        $fixRight.eq(i).children('[data-key$="-'+item+'"]').remove();
                        mergeRecord[item].rowspan +=1;
                    }
                }
            })

            function isMaster (index, item) {
                var mergeField = mergeRecord[item].mergeField;
                var dataLength = layui.table.cache[myTable.id].length;
                for (var i=0; i<mergeField.length; i++) {

                    if (layui.table.cache[myTable.id][dataLength-2-index][mergeField[i]]
                        !== layui.table.cache[myTable.id][dataLength-1-index][mergeField[i]]) {
                        return true;
                    }
                }
                return false;
            }

        }
    };

    // 输出
    exports('tableMerge', mod);
});