Layui 动态列表合并

列表合并前：

列表合并后：

代码如下：

html代码：

<div class="layui-form users_list">
    <table class="layui-table" id="test" lay-filter="demo"></table>
	
	<script type="text/html" id="virtualStatus">
        {{#  if(d.virtualStatus == '0'){ }}
        <span class="layui-badge layui-bg-green">挂起</span>
        {{#  } else if(d.virtualStatus == '1'){ }}
        <span class="layui-badge layui-bg-green">在用</span>
        {{#  } else if(d.virtualStatus == '2'){ }}
        <span class="layui-badge layui-bg-red">停用</span>
        {{#  } else if(d.virtualStatus == '3'){ }}
        <span class="layui-badge layui-bg-green"></span>
        {{#  } else { }}
        <span class="layui-badge layui-bg-gray">-</span>
        {{#  } }}
    </script>
</div>

js代码：

layui.use(['layer', 'form', 'table'], function () {
        var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                table = layui.table;

        var t = {
            elem: '#test',
            toolbar: '#toolbarDemo',
            url: '${base}/admin/server/base/list',
            method: 'post',
            page: true,
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
                groups: 2, //只显示 1 个连续页码
                first: "首页", //显示首页
                last: "尾页", //显示尾页
                limits: [3, 10, 20, 30]
            },
            totalRow: true ,//开启合计行
            cellMinWidth: 140, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {type: 'checkbox'},
                {field: 'serverIp', title: '物理机IP'},
                {field: 'model', title: '物理机标签', width: '160'},
                {field: 'serverUser', title: '物理机用途', templet: '#serverUser'},
                {field: 'virtualIp', title: '虚拟机IP'},
                {field: 'virtualStatus', title: '虚拟机状态', width: '90', templet: '#virtualStatus'},
                {field: 'virtualUser', title: '虚拟机用途', templet: '#virtualUser'},
                {field: 'platformName', title: '平台名称'},
                {field: 'isClone', title: '操作', fixed: 'right', align: 'center', width: '190', toolbar: '#barDemo'}
            ]],
            done: function (res, curr, count) { // 列表合并
                layuiRowspan(['serverIp', 'virtualIp'], 1);
            }
        };
        table.render(t);
        

列表合并：

其中js方法：layuiRowspan(['serverIp', 'virtualIp'], 1); 也可以是单个列表合并：layuiRowspan('serverIp', 1);

layuiRowspan方法如下：

//合并数据表格行
var layuiRowspan = function (fieldNameTmp, index, flag) {
    let fieldName = [];
    if (typeof fieldNameTmp == "string") {
        fieldName.push(fieldNameTmp);
    } else {
        fieldName = fieldName.concat(fieldNameTmp);
    }
    for (let i = 0; i < fieldName.length; i++) {
        execRowspan(fieldName[i], index, flag);
    }
}

var execRowspan = function (fieldName, index, flag) {
    // 1为不冻结的情况，左侧列为冻结的情况
    let fixedNode = index == "1" ? $(".layui-table-body")[index - 1] : (index == "3" ? $(".layui-table-fixed-r") : $(".layui-table-fixed-l"));
    // 左侧导航栏不冻结的情况
    let child = $(fixedNode).find("td");
    let childFilterArr = [];
    // 获取data-field属性为fieldName的td
    for (let i = 0; i < child.length; i++) {
        if (child[i].getAttribute("data-field") == fieldName) {
            childFilterArr.push(child[i]);
        }
    }
    // 获取td的个数和种类
    let childFilterTextObj = {};
    for (let i = 0; i < childFilterArr.length; i++) {
        let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
        if (childFilterTextObj[childText] == undefined) {
            childFilterTextObj[childText] = 1;
        } else {
            let num = childFilterTextObj[childText];
            childFilterTextObj[childText] = num * 1 + 1;
        }
    }
    let canRowspan = true;
    let maxNum;//以前列单元格为基础获取的最大合并数
    let finalNextIndex;//获取其下第一个不合并单元格的index
    let finalNextKey;//获取其下第一个不合并单元格的值
    for (let i = 0; i < childFilterArr.length; i++) {
        (maxNum > 9000 || !maxNum) && (maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : 9999);
        let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;//获取下一个单元格的值
        let nextIndex = i + 1;
        let tdNum = childFilterTextObj[key];
        let curNum = maxNum < tdNum ? maxNum : tdNum;
        if (canRowspan) {
            for (let j = 1; j <= curNum && (i + j < childFilterArr.length);) {//循环获取最终合并数及finalNext的index和key
                finalNextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
                finalNextIndex = i + j;
                if ((key != finalNextKey && curNum > 1) || maxNum == j) {
                    canRowspan = true;
                    curNum = j;
                    break;
                }
                j++;
                if ((i + j) == childFilterArr.length) {
                    finalNextKey = undefined;
                    finalNextIndex = i + j;
                    break;
                }
            }
            childFilterArr[i].setAttribute("rowspan", curNum);
            if ($(childFilterArr[i]).find("div.rowspan").length > 0) {//设置td内的div.rowspan高度适应合并后的高度
                $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
                $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
            }
            canRowspan = false;
        } else {
            childFilterArr[i].style.display = "none";
        }
        if (--childFilterTextObj[key] == 0 | --maxNum == 0 | --curNum == 0 | (finalNextKey != undefined && nextIndex == finalNextIndex)) {//||(finalNextKey!=undefined&&key!=finalNextKey)
            canRowspan = true;
        }
    }
}