layui表格合并单元格

最新推荐文章于 2024-07-25 10:24:34 发布

源码plus

最新推荐文章于 2024-07-25 10:24:34 发布

阅读量2.2k

点赞数 1

分类专栏： layui前端框架的使用文章标签： layui jquery ajax

本文链接：https://blog.csdn.net/qq_38310446/article/details/103633804

版权

layui前端框架的使用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

思想：layui表格合并单元格，layui并没有给出相应的解决办法；那么我们可以在前端使用js将相邻并相同的单元格合并；

1.页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>City3</title>
    <link rel="stylesheet" href="/layui2.45/css/layui.css" />
    <script type="text/javascript" src="/layui2.45/layui.js"></script>
    <style>
        .layui-table-page {
            text-align: center;
        }
    </style>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.jquery;//引入jquery的模块
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 512
            ,url: '/getCity3' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, fixed: 'left'},
                {field: 'name', title: '名称'}
                ,{field: 'countryCode', title: '城市代码',sort: true}
                ,{field: 'district', title: 'district'}
                ,{field: 'population', title: 'population'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,
            done: function (res, curr, count) {
                merge(res);
            }
        });
        function merge(res) {
            console.log(res.data)
            var data = res.data;
            var mergeIndex = 0;//定位需要添加合并属性的行数
            var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
            var columsName = ['id','name','countryCode'];//需要合并的列名称
            var columsIndex = [0,1,2];//需要合并的列索引值

            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;
            }
        }

    });
</script>
</body>
</html>