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',  //做刷新的时候需要用IDtree: {iconIndex: 3, // 展开图标显示在第几列isPidData: true, // // pid形式数据转children形式idName: 'cid', // 子idpidName: 'pid', // 父idopenName: 'open',// 是否默认展开的字段名getIcon: function (d) { // 自定义图标return ''}},elem: '#tableId',	//表格idpage: 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);
});