layui 复杂表头单元格合并

最新推荐文章于 2024-05-06 08:25:56 发布
最新推荐文章于 2024-05-06 08:25:56 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： layui
原文链接：https://www.cnblogs.com/zhinian-/p/11063168.html
版权

效果图在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复杂表头+select下拉框默认值+单元格合并</title>
    <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        /*select下拉框显示*/
        td[data-field="qualityStatus"]>div {
            overflow: inherit;
        }
        /*去除行点击、hover背景色*/
        .layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{
            background-color: rgba(255,255,255,0);
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table class="layui-hide" id="qua_standard_table" lay-filter="qua_standard_table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    layui.use(['element','upload','laydate','table','form'], function(){
        var element = layui.element
            ,table = layui.table,
            laypage = layui.laypage,
            form = layui.form,
            upload = layui.upload,
            laydate = layui.laydate;
        //模拟数据
        var selectdata = [
            {
                amountOfMoney: 5000,
                basicMeasurement: "kg",
                certificateNumber: "内容15",
                concession: null,
                contentId: null,
                disqualification: null,
                explains: "内容67",
                files: null,
                id: 2,
                inspectContent: "内容22",
                inspectContentNumber: "内容0000",
                inspector: null,
                inspectorDate: null,
                inspectorDescription: null,
                isNumber: null,
                main: null,
                manufacturer: "内容44",
                materialId: 14,
                materialName: "内容4",
                materialNo: "内容一",
                materialSize: "2*3",
                meId: null,
                orderAmount: 100,
                orderId: 1,
                orderPrice: 20,
                orderedInAmount: 0,
                projectName: "其他",
                purchaseMeasurement: "kg",
                qualified: null,
                qualityStatus: null,
                qualityTestedInAmount: 9,
                standard: "内容11",
                undetectedCount: 91,
            },
            {
                amountOfMoney: 5000,
                basicMeasurement: "kg",
                certificateNumber: "内容14",
                concession: null,
                contentId: null,
                disqualification: null,
                explains: "内容66",
                files: null,
                id: 2,
                inspectContent: "内容33",
                inspectContentNumber: "内容1111",
                inspector: null,
                inspectorDate: null,
                inspectorDescription: null,
                isNumber: null,
                main: null,
                manufacturer: "内容44",
                materialId: 14,
                materialName: "内容4",
                materialNo: "内容一",
                materialSize: "2*3",
                meId: null,
                orderAmount: 100,
                orderId: 1,
                orderPrice: 20,
                orderedInAmount: 0,
                projectName: "其他",
                purchaseMeasurement: "kg",
                qualified: null,
                qualityStatus: null,
                qualityTestedInAmount: 9,
                standard: "内容001",
                undetectedCount: 91,
            },
            {
                amountOfMoney: 5000,
                basicMeasurement: "kg",
                certificateNumber: "内容15",
                concession: null,
                contentId: null,
                disqualification: null,
                explains: "内容67",
                files: null,
                id: 1,
                inspectContent: "内容22",
                inspectContentNumber: "内容0000",
                inspector: null,
                inspectorDate: null,
                inspectorDescription: null,
                isNumber: null,
                main: null,
                manufacturer: "内容45",
                materialId: 13,
                materialName: "内容3",
                materialNo: "内容二",
                materialSize: "2*3",
                meId: null,
                orderAmount: 100,
                orderId: 1,
                orderPrice: 20,
                orderedInAmount: 0,
                projectName: "其他",
                purchaseMeasurement: "kg",
                qualified: null,
                qualityStatus: null,
                qualityTestedInAmount: 12,
                standard: "内容11",
                undetectedCount: 88,
            },
            {
                amountOfMoney: 5000,
                basicMeasurement: "kg",
                certificateNumber: "内容14",
                concession: null,
                contentId: null,
                disqualification: null,
                explains: "内容66",
                files: null,
                id: 1,
                inspectContent: "内容33",
                inspectContentNumber: "内容1111",
                inspector: null,
                inspectorDate: null,
                inspectorDescription: null,
                isNumber: null,
                main: null,
                manufacturer: "内容45",
                materialId: 13,
                materialName: "内容3",
                materialNo: "内容二",
                materialSize: "2*3",
                meId: null,
                orderAmount: 100,
                orderId: 1,
                orderPrice: 20,
                orderedInAmount: 0,
                projectName: "其他",
                purchaseMeasurement: "kg",
                qualified: null,
                qualityStatus: null,
                qualityTestedInAmount: 12,
                standard: "内容001",
                undetectedCount: 88,
            }
        ]

        //主页面数据
        table.render({
            elem: '#qua_standard_table',
            id:'qua_standard_table',
            //url:'',
            data:selectdata,
            method:'POST',
            title: '数据表',
            height: 'full-60',
            cellMinWidth: 120,
            size: 'lg',
            cols:[[
                {align:'center',rowspan:2, title:'序号',width:100,type:'numbers',field: 'num',fixed:'left'},
                {align:'center',rowspan:2,field: 'id', title: 'ID',hide:true},//隐藏列
                {align:'center',rowspan:2,field:'materialNo', title:'表头',width:100},
                {align:'center',rowspan:2,field:'materialName', title:'表头'},
                {align:'center',rowspan:2,field:'projectName', title:'表头'},
                {align:'center',rowspan:2,field:'purchaseMeasurement', title:'表头'},
                {align:'center',rowspan:2,field:'inspectContentNumber', title:'表头'},
                {align:'center',rowspan:2,field:'inspectContent', title:'表头'},
                {align:'center',rowspan:2,field:'standard', title:'表头'},
                {align:'center',rowspan:2,field:'explains', title:'表头'},
                {align:'center',rowspan:2,field:'qualityStatus', title:'结果',templet: function (d) {
                    if(d.qualityStatus == null){
                        return '<select name="qualityStatus" lay-filter="testSelect" lay-verify="required" >' +
                            '        <option value="0" selected>合格</option>' +
                            '        <option value="1">不合格</option>' +
                            '      </select>';
                    }

                }},
                {align:'center',rowspan:2,field:'certificateNumber', title:'表头',templet: function (d) {
                    if(d.certificateNumber==null || d.certificateNumber==''){
                        return '无'
                    }else{
                        return d.certificateNumber
                    }
                }},
                {align:'center',rowspan:2,field:'undetectedCount', title:'表头'},
                {align:'center',field:'resultNum', title:'表头',colspan:3},
                {align:'center',rowspan:2,field:'qualityTestedInAmount', title:'表头'},
                {align:'center',rowspan:2,field:'manufacturer', title:'表头'},
                {align:'center',rowspan:2,field:'certificate', title:'表头', templet: function (d) {
                    return '<span class="layui-breadcrumb" lay-separator="|">' +
                        '<a href="javascript:;" lay-event="qua_standard_edit">添加附件</a>' +
                        '</span>';
                },fixed:'right'},
                {align:'center',rowspan:2,width:100,field: 'operation', title: '操作', templet: function (d) {
                    return '<span class="layui-breadcrumb" lay-separator="|">' +
                        '<a href="javascript:;" lay-event="qua_standard_del">删除</a>' +
                        '</span>';
                },fixed:'right'}
            ],
                [
                    {align:'center',field:'qualified', title:'表头', edit: 'number'},
                    {align:'center',field:'disqualification', title:'表头', edit: 'number'},
                    {align:'center',field:'concession', title:'表头', edit: 'number'},
                ]
            ],
            done: function (res, curr, count) {
                element.init();
                $('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模拟点击 初始化数据
                merge(res);//合并单元格
            }
        });

        $('#receiptForm1').on('keyup','.layui-table-edit',function () {
            this.value=this.value.replace(/^(0+)|[^\d]+/g,'')//TODO
        });

        //行事件
        table.on('tool(qua_standard_table)', function(obj){

            if(obj.event === 'qua_standard_edit'){
                layer.msg('添加')
            }else if(obj.event === 'qua_standard_del'){
                layer.msg('删除')
            }
        });

    });
    //layui 结束

    //合并开始
    function merge(res) {
        var data = res.data;
        var mergeIndex = 0;//定位需要添加合并属性的行数
        var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
        var _number = 1;//保持序号列数字递增
        var columsName = ['num','number','typeName','projectName','unit','suppliedNum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//需要合并的列名称
        var columsIndex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//需要合并的列索引值
        var mergeCondition = 'id';//需要合并的 首要条件  在这个前提下进行内容相同的合并
        var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr
        var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr

        for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
            var trArr = $(".layui-table-main>.layui-table").find("tr");//所有行
            for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据

                if (data[i][mergeCondition] === data[i-1][mergeCondition]) {
                    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就需要重新计算
                    }
                } else {
                    mergeIndex = i;
                    mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                }


            }
            mergeIndex = 0;
            mark = 1;
        }





        //操作左右定位列的表格
        $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) {
            if ($(v).find('td').eq(2).css('display') === 'none') {
                tdArrL.eq(i).find('td').css('display','none');
                tdArrR.eq(i).find('td').css('display','none');
            } else {
                tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);
                tdArrL.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight);
                tdArrR.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight);

            }
        })



    }
    //合并结束
</script>
</html>
车字辕
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui table+复杂表头+合并单元格
dljm328963024的博客
06-21 3334
效果图： 问题：行hover效果感觉错乱 所以改为透明色 代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>复杂表头+select下拉框默认值+单元格合...
layui table 表头合并_layui table+复杂表头+合并单元格
weixin_39541044的博客
12-20 100
1 2 3 4 5 复杂表头+select下拉框默认值+单元格合并6 7 8 /*select下拉框显示*/9 td[data-field="qualityStatus"]>div{10 overflow:inherit;11 }12 /*去除行点击、hover背景色*/13 .layui-table tbody...
layui table 多级表头的使用
最新发布
在原七海的博客
05-06 1092
layui table 多级表头的使用教程与示例
layui方法渲染复杂表头，合并数据项的单元格
Moon Star
04-07 810
1. 数据类型 [ { amountList: [ {year: "2018", reportedAmount: "269.62", approvedAmount: "270.0"}, {year: "2019", reportedAmount: "255.16", approvedAmount: "256.0"}, {year: "2020", reportedAmount: "307.65", appro
layui table 复杂表头设计及固定表头、单元格内容相同自动合并、合计去除小数点
曉儂
12-07 1386
layui table 复杂表头设计及固定表头、单元格内容相同自动合并、合计去除小数点
layui table 单元格合并
qq_26702601的博客
10-26 4025
在表格加载完成方法执行 done:function(res, curr, count){                 merge(res);             } //合并单元格 function merge(res) {     var data = res.data;     var mergeIndex = 0;//定位需要添加合并属性的行数     var mark = 1;...
layui table合并单元格.zip
01-06
"layui table合并单元格.zip" 这个压缩包正是提供了关于如何在layui的表格中实现单元格合并的示例和资源。 首先，"layui table.txt" 文件可能包含了layui表格组件的基础用法和API介绍。layui的表格组件支持动态加载...
layui动态表头的实现代码
10-16
在本文中，我们将深入探讨如何在layui框架中实现动态表头的功能。layui是一款轻量级的前端组件库，提供了丰富的UI元素和功能，包括表格（table）组件。动态表头意味着表格的列可以根据特定条件或数据动态生成，这种...
layui js 动态加载数据 复杂表头多表头实例.pdf
11-27
然而，在实际开发中，遇到复杂表头的需求是非常常见的，例如多表头、合并单元格、数据动态加载等等。本文将针对 Layui 的表格组件，讲解如何动态加载数据实现复杂表头多表头实例。 一、Layui 表格组件简介 Layui ...
在Layui中操作数据表格,给指定单元格添加事件示例
10-16
本篇将详细介绍如何在Layui的数据表格中给指定单元格添加事件。 首先，创建一个Layui数据表格需要使用`table.render()`方法。在给出的代码中，我们可以看到一个表格被初始化，其中包含了多个列，每列都有自己的字段...
layui数据表格导出Excel插件
07-20
layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中的数据导出到Excel文件中。layui是一款轻量级的前端UI框架，以其简洁、优雅的代码风格和丰富的组件库深受开发者喜爱...
LayUiTable表单相同参数的单元格合并
10-26
LayUiTable表单相同参数的单元格合并，可以几个列一起合并，注释相应完善。LayUiTable表单相同参数的单元格合并
layui表格合并
weixin_40362806的博客
03-10 1918
layui表格合并
前端-layui动态渲染表格行列与复杂表头合并
伊甸园的博客
09-15 2868
cols中传入[ [ ],[ ] ]这种数组类型的格式；拿到id 渲染位置表格。
HTML表格标签
Junran_Tan的博客
10-28 193
表格结构标签 <thead></thead>：用于定义表格头部。内部必须拥有标签。一般是位于第一行。 <tbody></tbody>：用于定义表格的主题，主要用于放数据本体。 以上标签都是放在<table></table>标签中。 合并单元格 合并单元格的方式 跨行合并：rowspan="合并单元格的个数“ 跨列合并：colspan="合并单元格的个数” 合并单元格三部曲 先确定是跨行还是跨列合并。 找到目标单元格，写
layui table 表头合并_layui table表格详解
weixin_31699079的博客
01-12 1177
原文转载地址：http://www.mamicode.com/info-detail-2539217.html标签：tail url 技术 esc 去掉 属性 == 对象 orm上次做table有些东西 忘记了 这次当作来个分析总结一下 跟大家共同学习闲话不多说 直接上例子 技术分享图片代码：//*layuitable初始化代码**layui.use(‘tabl...
layui table 表头合并_让Layui的table模块支持动态表头
weixin_39961522的博客
12-20 344
本文章是基于layui-v2.5.6版本做的介绍，如果你用的是其它版本，应该也大同小异；像我们在做一个项目，尤其是企业一些定制的模块，经常会在界面中添加一个Tab模块用于切换查看不同状态下的内容，如下图：但要求在不同的状态显示的表头又不一样，如下图：但是Larui自带的table.js插件是不支持的，这里我们简单的加几个字符进去，就可以支持了；1、打开插件目录下的layui/lay/modules...
layui table 合并单元格
05-16
合并单元格主要是指在表格中合并相邻的单元格，将它们合并成一个单元格，从而可以显示更加复杂的数据。 在layui table中，合并单元格有两种方式实现： 第一种方式是通过设置colspan和rowspan属性来合并单元格。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值