layui合并单元格方法

layui合并单元格方法

---

前言

layui没有对应模块，参照网上例子改写之后实现效果

---

提示：以下是本篇文章正文内容

1.关键代码

代码如下：

done : function(res, curr, count) {
					merge(res);
			 },


 function merge(res) {

        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['unit','sysname'];//需要合并的列名称
        var columsIndex = [2,3];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                    if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }

2.全部代码

代码如下：

        // 渲染表格
        let formHeight = $("#search-form").height();
        table.render({
            elem: '#virtualresource-table',
            url: setter.base_server + 'virtualresource/v1/list',
            method: 'GET',
            where: {
                userId: setter.getUser().userId,
                access_token: setter.getToken().access_token,
				isvirtualflag : 1
            },
            page: true,
            height: 'full-' + (80 + formHeight),
            toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			,defaultToolbar: ['filter', 'exports', 'print'],
			done : function(res, curr, count) {
					merge(res);
			 },
            cols: [[
            	{type: 'numbers'},
            	// {filed:'id',hide:"true"},
				{field: 'xx', title: 'xx'},
				{field: 'xxx', title: 'xxx'},
				{field: 'xxxx', title: 'xxxx'},
				{field: 'sysplace', hide: "true"},
                {align: 'center', toolbar: '#virtualresource-table-bar',width: 200, title: '操作', fixed: 'right'}
            ]]
        });

        // 添加按钮点击事件
        $('#virtualresource-btn-add').click(function () {
            showEditModel();
        });

        function merge(res) {

        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var columsName = ['xxx','xxxx'];//需要合并的列名称
        var columsIndex = [2,3];//需要合并的列索引值

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                    var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                    var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                    if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                        mark += 1;
                        tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                            $(this).attr("rowspan", mark);
                        });
                        tdCurArr.each(function () {//当前行隐藏
                            $(this).css("display", "none");
                        });
                    }else {
                        mergeIndex = i;
                        mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                    }
                }
            mergeIndex = 0;
            mark = 1;
        }
    }

---

总结

多百度，多思考