layui中table合并单元格

最新推荐文章于 2024-04-04 09:45:30 发布
最新推荐文章于 2024-04-04 09:45:30 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： layui javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26695613/article/details/127783364
版权 


@{
    Layout = null;

}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <style>
        * {
            font-size:16px;
        }
        #kdxfxChart .layui-table-view .layui-table[lay-size=sm] .layui-table-cell {
            line-height: 15px;
        }

        .layui-table tbody tr:hover {
            background-color: #04274d;
        }

        .tablediv1 .layui-table-header .layui-table {
            border: 1px solid white !important;
            margin-bottom: 0px !important;
        }

        .tablediv1 {
            background-color: #052a4d;
        }

            .tablediv1 .layui-table-header {
                /*border: 1px solid white;*/
                background-color: #052a4d !important;
            }

            .tablediv1 .layui-table-view .layui-table td, .layui-table-view .layui-table th {
                padding: 5px 0;
                border-top: none;
                border: 1px solid white;
            }

            .tablediv1 .layui-table {
                background-color: #052a4d !important;
            }

                .tablediv1 .layui-table thead tr {
                    background-color: #052a4d !important;
                }


                .tablediv1 .layui-table[lay-even] tr:nth-child(even) {
                    background-color: #052a4d !important;
                }

                .tablediv1 .layui-table tbody tr:hover, .statistics_branch_one .layui-table tbody tr:hover {
                    background-color: #052a4d !important;
                }

                .tablediv1 .layui-table-header{
                    border-style: none !important;
                }

        .tablediv .layui-table td, .layui-table th {
            border: 1px solid white !important;
        }
        .tablediv .layui-table-init {
            background-color: transparent !important;
        }

        .item {
            /*flex:1;*/
            width: 70px;
            height: 30px;
            border-radius: 5px;
            border: 1px solid white;
            background: #ccc;
            text-align: center;
            line-height: 30px;
        }

            .item:hover {
                background: #2918ff;
                cursor: pointer;
            }
        .layui-btn-group .layui-btn {
            background: #004273;
            width: 50px;
            border: .02vw solid rgb(40, 229, 233);
        }

        .selectedColor {
            /*background: rgba(40, 229, 233, .5) !important;*/
        }
    </style>
</head>
<body style="height:500px;background-color:black;">
    <div id="kdxfx" class="airtitle" style=" height:100%;width:100%;">
        <div class="title-box">
            <div id="realhourTitle" class="title">
                季度月度数据变化
                @*<span id="realtime1" style="color:rgba(0,255,255,.819608)"></span>*@
            </div>

            @*<div class="layui-btn-group" style="display:flex;flex-direction:row;justify-content:flex-end;margin-left: 2px;">*@
            <div class="layui-btn-group" style="position:absolute;right:10px;top:0px">
                <button type="button" name="paramType4" class="layui-btn layui-btn-sm selectedColor" style="width:80px;position: relative; top: -4px;" data-value="PM25">PM<sub>2.5</sub></button>
                <button type="button" name="paramType4" class="layui-btn layui-btn-sm" style="width:80px;" data-value="优良天数比率">优良率</button>
                <button type="button" name="paramType4" class="layui-btn layui-btn-sm" style="width:80px;" data-value="优良天数">优良天数</button>
            </div>


                @*<div style="display:flex;flex-direction:row;justify-content:flex-end">
            <div class="item" onclick="KHPMHome.LoadRealTablePM('tbrealpm','PM25')">PM2.5</div>
            <div class="item" onclick="KHPMHome.LoadRealTablePM('tbrealpm','优良天数比率')">优良率</div>
            <div class="item" onclick="KHPMHome.LoadRealTablePM('tbrealpm','优良天数')">优良率天数</div>
        </div>*@

            </div>
        <div id="kdxfxChart" class="tablediv1" style=" width: 100%; height: calc(100% - 2rem);overflow: scroll;">
            <div id="tbrealpm" lay-skin="line" lay-filter="tbrealpm"></div>
        </div>
    </div>
</body>
</html>
<script>
    var layer, table, AType;
    $(document).ready(function () {
        $('button[name="paramType4"]').eq(0).addClass('selectedColor');
        $('button[name="paramType4"]').on('click', function (item,index) {
            $(this).addClass('selectedColor').siblings().removeClass('selectedColor');
            $("button[name='paramType4']").each(function (i, n) {
                if ($(n).hasClass('selectedColor')) {
                    AType = $(n).data('value');
                }
            });
            
            switch (AType) {
                case 'PM25':
                    KHPMHome.LoadRealTablePM('tbrealpm', 'PM25');
                    break;
                case '优良天数比率':
                    KHPMHome.LoadRealTablePM('tbrealpm', '优良天数比率');
                    break;
                case '优良天数':
                    KHPMHome.LoadRealTablePM('tbrealpm', '优良天数');
                    break;
            }

        })



        layui.use(['layer', 'table'], function () {
            table = layui.table;
            layer = layui.layer;
            KHPMHome.LoadRealTablePM('tbrealpm', 'PM25')
        });
        var KHPMHome = {
            curTime: null,
            LoadRealTablePM: function (name, ParamType) {
                $.post('/TrendAnalysis/GetDataChange', { ParamType }, function (res) {
                    if (res != null) {

                        table.render({
                            elem: "#" + name,
                            id: 'name',
                            even: false, //隔行背景
                            size: 'sm',
                            data: res,
                            limit: 100,
                            height: $('#kdxfxChart').height() - 30,
                            cols: [[
                                { field: 'ParamType', title: '名称', width: 60, align: 'center' },
                                { field: 'SDateTime', title: '年度', width: 60,align: 'center' },
                                { field: 'TimeType', title: '范围',  width: 60, align: 'center' },
                                { field: '_1月', title: '1月',   width: 58, align: 'center' },
                                { field: '_2月', title: '2月',   width: 58, align: 'center' },
                                { field: '_3月', title: '3月',   width: 58, align: 'center' },
                                { field: '_4月', title: '4月',   width: 58, align: 'center' },
                                { field: '_5月', title: '5月',   width: 58, align: 'center' },
                                { field: '_6月', title: '6月',   width: 58, align: 'center' },
                                { field: '_7月', title: '7月',   width: 58, align: 'center' },
                                { field: '_8月', title: '8月',   width: 58, align: 'center' },
                                { field: '_9月', title: '9月',   width: 58, align: 'center' },
                                { field: '_10月', title: '10月', width: 58, align: 'center' },
                                { field: '_11月', title: '11月', width: 58, align: 'center' },
                                { field: '_12月', title: '12月', width: 58, align: 'center' },

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

            },
            merge: function (res, curr, count) {
                debugger
                var data = res.data;
                var mergeIndex = 0;//定位需要添加合并属性的行数
                var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
                var columsName = ['ParamType', 'SDateTime'];//需要合并的列名称
                var columsIndex = [0, 1];//需要合并的列索引值
                //合并行
                for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                    //var trArr = $(".layui-table-body>.layui-table").find("tr[data-index=2]");//所有行
                    var trArr = $(".tablediv1 .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属性
                                debugger
                                $(this).attr("rowspan", mark);
                            });
                            tdCurArr.each(function () {//当前行隐藏
                                debugger
                                $(this).css("display", "none");
                            });
                        } else {
                            mergeIndex = i;
                            mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                        }
                    }
                    mergeIndex = 0;
                    mark = 1;
                }
                //合并列 （季度colspan：3  年度colspan：12）
                var columsIndex2 = [3, 4, 5, 6];//需要合并的列索引值
                var trArr = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=2]");//季度行
                var trArrNina3 = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=3]");//年度行
                for (var i = 0; i < columsIndex2.length; i++) {
                    var tdPreArr = trArr.find("td").eq(columsIndex2[i]);//获取相同列的第一列
                    tdPreArr.each(function () {
                        debugger
                        $(this).attr("colspan", 3);
                    });

                    KHPMHome.HideTD(trArr, 5)
                    KHPMHome.HideTD(trArr, 6)
                    KHPMHome.HideTD(trArr, 7)
                    KHPMHome.HideTD(trArr, 8)
                    KHPMHome.HideTD(trArr, 9)
                    KHPMHome.HideTD(trArr, 10)
                    KHPMHome.HideTD(trArr, 11)
                    KHPMHome.HideTD(trArr, 12)


                    var tdPreArrNian = trArrNina3.find("td").eq(columsIndex2[0]);//获取相同列的第一列
                    tdPreArrNian.each(function () {
                        debugger
                        $(this).attr("colspan", 12);
                    });

                    KHPMHome.HideTD(trArrNina3, 2)
                    KHPMHome.HideTD(trArrNina3, 3)
                    KHPMHome.HideTD(trArrNina3, 4)
                    KHPMHome.HideTD(trArrNina3, 5)
                    KHPMHome.HideTD(trArrNina3, 6)
                    KHPMHome.HideTD(trArrNina3, 7)
                    KHPMHome.HideTD(trArrNina3, 8)
                    KHPMHome.HideTD(trArrNina3, 9)
                    KHPMHome.HideTD(trArrNina3, 10)
                    KHPMHome.HideTD(trArrNina3, 11)
                    KHPMHome.HideTD(trArrNina3, 12)
                }
                var trArr2 = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=6]");//季度行
                var trArrNina7 = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=7]");//年度行
                for (var i = 0; i < columsIndex2.length; i++) {
                    var tdPreArr2 = trArr2.find("td").eq(columsIndex2[i]);//获取相同列的第一列
                    tdPreArr2.each(function () {
                        $(this).attr("colspan", 3);
                    });
                    KHPMHome.HideTD(trArr2, 5)
                    KHPMHome.HideTD(trArr2, 6)
                    KHPMHome.HideTD(trArr2, 7)
                    KHPMHome.HideTD(trArr2, 8)
                    KHPMHome.HideTD(trArr2, 9)
                    KHPMHome.HideTD(trArr2, 10)
                    KHPMHome.HideTD(trArr2, 11)
                    KHPMHome.HideTD(trArr2, 12)

                    var tdPreArrNian = trArrNina7.find("td").eq(columsIndex2[0]);//获取相同列的第一列
                    tdPreArrNian.each(function () {
                        $(this).attr("colspan", 12);
                    });

                    KHPMHome.HideTD(trArrNina7, 2)
                    KHPMHome.HideTD(trArrNina7, 3)
                    KHPMHome.HideTD(trArrNina7, 4)
                    KHPMHome.HideTD(trArrNina7, 5)
                    KHPMHome.HideTD(trArrNina7, 6)
                    KHPMHome.HideTD(trArrNina7, 7)
                    KHPMHome.HideTD(trArrNina7, 8)
                    KHPMHome.HideTD(trArrNina7, 9)
                    KHPMHome.HideTD(trArrNina7, 10)
                    KHPMHome.HideTD(trArrNina7, 11)
                    KHPMHome.HideTD(trArrNina7, 12)
                }
                var trArr3 = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=10]");//季度行
                var trArrNina11 = $(".tablediv1 .layui-table-body>.layui-table").find("tr[data-index=11]");//年度行
                for (var i = 0; i < columsIndex2.length; i++) {
                    var tdPreArr3 = trArr3.find("td").eq(columsIndex2[i]);//获取相同列的第一列
                    tdPreArr3.each(function () {
                        $(this).attr("colspan", 3);
                    });

                    KHPMHome.HideTD(trArr3, 5)
                    KHPMHome.HideTD(trArr3, 6)
                    KHPMHome.HideTD(trArr3, 7)
                    KHPMHome.HideTD(trArr3, 8)
                    KHPMHome.HideTD(trArr3, 9)
                    KHPMHome.HideTD(trArr3, 10)
                    KHPMHome.HideTD(trArr3, 11)
                    KHPMHome.HideTD(trArr3, 12)


                    var tdPreArrNian = trArrNina11.find("td").eq(columsIndex2[0]);//获取相同列的第一列
                    tdPreArrNian.each(function () {
                        $(this).attr("colspan", 12);
                    });

                    KHPMHome.HideTD(trArrNina11, 2)
                    KHPMHome.HideTD(trArrNina11, 3)
                    KHPMHome.HideTD(trArrNina11, 4)
                    KHPMHome.HideTD(trArrNina11, 5)
                    KHPMHome.HideTD(trArrNina11, 6)
                    KHPMHome.HideTD(trArrNina11, 7)
                    KHPMHome.HideTD(trArrNina11, 8)
                    KHPMHome.HideTD(trArrNina11, 9)
                    KHPMHome.HideTD(trArrNina11, 10)
                    KHPMHome.HideTD(trArrNina11, 11)
                    KHPMHome.HideTD(trArrNina11, 12)
                }



            },
            HideTD(trArr, selecter) {

                trArr.find("td[data-field=_" + selecter + "月]").each(function () {

                    $(this).css("display", "none");
                });
            }


        }

    })




</script>

书中自有妍如玉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui table合并单元格
qq_44543292的博客
06-09 3223
想要合并单元内容，可以试试函数转义的方法 函数转义。自 layui 2.2.5 开始，templet 开始支持函数形式，函数返回一个参数 d，包含接口返回的所有字段和数据。如下所示： Code layui.code 1. table.render({ 2. cols: [[ 3. {field:'title', title: '文章标题', width: 200 4. ,...
el-table合并单元格的方式
code_knife的博客
10-10 5109
el-table单元格合并 方法一：element官网给出的案例 <template> <div> <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"> <el-table-column prop="id" label="ID"
Layui table合并单元格
xyx_0300的博客
05-31 1265
table.render({ ... ... ... done: function (res, curr, count) { var columsName = ["De_Name", "型号", "品牌", "封装"]; var columsIndex = [1, 2, 3, 4]; var elem = "div[lay-id='dataTable_Client'] "; merge(res, columsName, columsIndex, elem)
layui表格单元格合并
w11117的博客
09-08 502
layui表格单元格合并
layui-table-merge：优雅地解决表格合并问题
最新发布
gitblog_00071的博客
04-04 948
layui-table-merge：优雅地解决表格合并问题 项目地址:https://gitcode.com/yelog/layui-table-merge layui-table-merge 是一个基于 LayUI 的插件，它旨在为 web 开发者提供一个简单、高效的表格行/列合并解决方案。如果你正在使用 LayUI 构建项目，并且需要在表格中实现复杂的数据展示，那么这个项目将是你的好帮手。 项...
甘特图demo
01-19
甘特图demo
layui 动态表格 合并单元格
zheyijieyou的博客
08-31 2004
效果图 代码放置位置 done : function(res, curr, count) { merge(res); } function merge(res) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var columsName
layui表格合并的方法
热门推荐
Benxiaohai_311的博客
08-29 1万+
layui表格合并的方法 NO.3
甘特图插件
cybozu的博客
09-27 5002
概要 这次为大家介绍的是，将以范例形式公开的 “用甘特图显示To Do” 的Javascript转变为插件文件的步骤。 关于操作详情请参考 kintone 插件开发的准备。 主要的更新信息 2017/05： 对应了大项目－小项目表示形式。其他的追加功能请参考“更新履歴”。 注意：使用旧版本插件的系统，更新到新版本插件时，由于之前的颜色设置将变得无效，所以需要到插件的设置页面重新设置。 　　...
jquery实现甘特图时效管理
Hzq88888的博客
07-11 1327
*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*高宽分别对应横竖滚动条的尺寸*//*滚动条整体样式*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条里面小方块*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*//*滚动条整体样式*//*滚动条里面轨道*/
layui table合并单元格.zip
01-06
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
LayUiTable表单相同参数的单元格合并
10-26
本话题聚焦于LayUI中的Table组件，特别是如何实现相同参数的单元格合并功能，这在展示数据时能有效提高信息的可读性和美观性。 LayUI Table的单元格合并功能，主要是通过`parseData`方法和自定义模板来实现的。当...
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
layui数据表格跨行自动合并的例子
10-16
今天小编就为大家分享一篇layui数据表格跨行自动合并的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
本篇将详细介绍如何在Layui的数据表格中给指定单元格添加事件。 首先，创建一个Layui数据表格需要使用`table.render()`方法。在给出的代码中，我们可以看到一个表格被初始化，其中包含了多个列，每列都有自己的字段...
layui表格合并
Jasmyn飞飞飞的博客
03-17 1102
遇到一个需求，layui合并表格，发现同事在一个项目里有写，就lou一下，做个记录，哈哈哈哈 先看效果： 实现方法如下 一、自定义一个modul，用来合并表格，然后对需要合并的列，加个merge属性，设置为true // 自定义模块 layui.config({ base: 'module/' }).extend({ tableMerge: 'tableMerge'...
前端-layui动态渲染表格行列与复杂表头合并
伊甸园的博客
09-15 2937
cols中传入[ [ ],[ ] ]这种数组类型的格式；拿到id 渲染位置表格。
layui合并表格的单元格 合并列或行的两种方法
qq_41515189的博客
11-09 6090
注意：两种方法要求layui表格的单元格中没有使用fixed属性，不然代码不会起效 方法一： /** * 合并单元格（列） * @param res 表格数据 * @param curr 当前页 * @param count 总数 */ function merge(res, curr, count) { var data = res.data; var mergeIndex =...
gantt/甘特图完整代码（带注释，可以复制）
zheshihuahua的博客
11-18 1528
gantt/甘特图完整代码（带注释，可以复制然后直接开整）
layui table 合并单元格
05-16
layui table是一款基于layui框架的数据表格插件，可以实现表格分页、排序、过滤等功能，而且还支持合并单元格。 合并单元格主要是指在表格中合并相邻的单元格，将它们合并成一个单元格，从而可以显示更加复杂的数据。 在layui table中，合并单元格有两种方式实现： 第一种方式是通过设置colspan和rowspan属性来合并单元格。具体使用方法如下： table.render({ elem: '#test', cols: [[ //表头 {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'sex', title: '性别', width: 80}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', width: 200}, {field: 'experience', title: '积分', width: 100}, {field: 'score', title: '评分', width: 100}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', width: 100} ]], data: [], done: function(res, curr, count){ //合并单元格 var index = 0; var data = res.data; for(var i=0;i<data.length;i++){ layui.$('#test tr:eq('+index+') td:eq(0)').attr('rowspan', 2); layui.$('#test tr:eq('+index+') td:eq(1)').attr('rowspan', 2); layui.$('#test tr:eq('+index+') td:eq(2)').attr('rowspan', 2); index += 2; } } }); 第二种方式是通过设置lay-id属性来合并单元格。具体使用方法如下： table.render({ elem: '#test', url: '/demo/table/user/', method: 'get', cols: [[ {field:'id', title:'ID', width:80, sort:true, fixed: 'left'} ,{field:'username', title:'用户名', width:120} ,{field:'sex', title:'性别', width:80, sort:true} ,{field:'city', title:'城市', width:100} ,{field:'sign', title:'签名', width:200} ,{field:'experience', title:'积分', width:100, sort:true} ,{field:'score', title:'评分', width:100, sort:true} ,{field:'classify', title:'职业', width:100} ,{field:'wealth', title:'财富', width:135, sort:true, fixed: 'right'} ]], id: 'test', page: true, limit: 10, height: 'full-200', done:function(res, curr, count){ //合并单元格 var data = res.data; var mergeList = ['username','city','classify']; for(var i=0;i<mergeList.length;i++){ var mergeArray = []; var mergeCount = 1; for(var j=0;j<data.length;j++){ if(j==data.length-1){ mergeArray.push(mergeCount); }else{ if(data[j][mergeList[i]]==data[j+1][mergeList[i]]){ mergeCount++; }else{ mergeArray.push(mergeCount); mergeCount = 1; } } } var id = '#' + layui.table.config.id; layui.$(id + ' tbody tr').each(function(rowIndex){ var td = layui.$(this).find('td[data-field='+mergeList[i]+']'); for(var k = 0;k<td.length;k++){ if(mergeArray[rowIndex] && mergeArray[rowIndex]>1){ layui.$(td[k]).attr('rowspan', mergeArray[rowIndex]); mergeArray[rowIndex]--; } } }) } } }); 以上是两种实现layui table合并单元格的方法，具体根据实际需求而定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值