table 单元格合并

效果如图所示，第一列相同的记录进行单元格合并：

代码如下：

                    <table class="layui-table" id="table" lay-filter="test"
                           style="padding-top: 20px;table-layout:fixed;width: 100%">
                        <thead id="thead">
                        <tr>
                            <th lay-data="{field:'testEnv', width:110,align : 'center'}">测试环境</th>
                            <th lay-data="{field:'user_server', width:277,align : 'center'}">占用服务</th>
                            <th lay-data="{field:'product', width:110,align : 'center'}">项目编号</th>
                            <th lay-data="{field:'user', width:110,align : 'center'}">申请人</th>
                            <th lay-data="{field:'start_date', width:110,align : 'center'}">开始时间</th>
                            <th lay-data="{field:'end_date', width:110,align : 'center'}">结束时间</th>
                            <th lay-data="{field:'pro_statud', width:110,align : 'center'}">项目状态</th>
                            <th lay-data="{field:'operation',width:'125',align : 'center'}">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbody">
                        {% for r in records %}
                            <tr>
                                <td>
                                    {{ r.env_name }}
                                    {% if r.env_status == 0 %}
                                        <input type="button" class="btn btn-success btn-xs" value="空闲中">
                                    {% elif r.env_status == 1 %}
                                        <input type="button" class="btn btn-danger btn-xs" value="使用中">
                                    {% endif %}
                                </td>
                                <td>{{ r.use_server }}</td>
                                <td>{{ r.env_pro }}</td>
                                <td>{{ r.env_user }}</td>
                                <td>{{ r.start_date }}</td>
                                <td>{{ r.end_date }}</td>
                                <td>{% if r.env_pro %}
                                    {{ r.get_pro_status_display }}
                                {% endif %}
                                </td>
                                <td>
                                    {% if r.env_pro %}
                                        {% if r.env_user ==  username %}
                                            {% if  r.pro_status == 0 or r.pro_status == 1 %}
                                                <a href="javascript:void(0)"
                                                   onclick="openEditModel('{{ r.env_pro }}')">
                                                    <img src="/static/svg/pen.svg">修改
                                                </a>
                                            {% endif %}
                                            {% if  r.pro_status != 1 %}
                                                <a href="javascript:void(0)"
                                                   onclick="recordDelete('{{ r.env_pro }}','{{ r.env_name }}')">
                                                    <img src="/static/svg/delete.svg">删除
                                                </a>
                                            {% endif %}
                                        {% endif %}

                                        {% if usr_role ==  'admin' or usr_role ==  'dev' %}
                                            {% if  r.pro_status == 1 %}
                                                <a href="javascript:void(0)"
                                                   onclick="openReleaseModel('{{ r.env_pro }}')">
                                                    <img src="/static/svg/auditing.svg">释放
                                                </a>
                                            {% endif %}
                                        {% endif %}
                                    {% endif %}
                                </td>

                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

js

    //合并数据表格行
    layui.use('table', function () {
        var table = layui.table;
        table.init('test', {
            done: function () {
                layuiRowspan('testEnv', 1);
            }
        });
    })
    
    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;
            }
        }
    }