layui 静态动态复杂多表头

最新推荐文章于 2024-05-30 11:05:59 发布

Aimyone

最新推荐文章于 2024-05-30 11:05:59 发布

阅读量2.1k

点赞数 1

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/118959100

版权

layui 专栏收录该内容

46 篇文章 5 订阅

订阅专栏

1，我要做什么

现在我打算做一个这样的表头
在这里插入图片描述

2，复杂表头的几个重要属性

跨行：rowspan
跨列：colspan

3，分析需求

红色为多表头的一数组

橙色为多表头的二维数组
在这里插入图片描述

4，静态多表头代码


 cols: [
        [
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',colspan:4},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',colspan:2},
         ],
         [
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center'},
         ]
   ],

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

5，静态+动态多表头

后端代码：


//二维动态表头
 String titlesql1="select name,code from table1";
 List<Map<String,Object>> titleList1=jdbcTemplate.queryForList(titlesql1);
 model.addAttribute("titleList1",JSON.toJSONString(titleList1));

前端代码：


function insetTable(data) {
        //templet
        var titleList1=${titleList1};
        var columnAry = [];
        columnAry[0]= [
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',rowspan:2},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',colspan:4},
           {field: 'name', title: '标题',  width:110,  align: 'center', halign: 'center',colspan:2},
         ];
        
        columnAry[1]=[];
        for (var i = 0; i < titleList1.length; i++) {
            var onechenbenkemu = titleList1[i];
            var widthnum=110;
            var label=onechenbenkemu.name;
            label=label.length>10?label.substring(0,10):label; 
            widthnum=label.length*16+20; //宽度设置
            widthnum=widthnum<110?110:widthnum;
            console.log(label+"::"+widthnum)
            columnAry[1].push({field:onechenbenkemu.code, title: label, width: widthnum, align: 'right', halign: 'center'});
         }

    
        table.render({
            elem: '#weidatagrid1',
            height: h-100,
            size: 'sm', //小尺寸的表格
            sort:true,
            page:false,
            limit:15
            limits:[15,30,60,80,160,300,600,1000],
            cols:columnAry,
            data: data? data : [],
            filter:{
                bottom:false
            },
            done: function () {
                layui.soulTable.render(this)
            }
        });


        table.on('rowDouble(weidatagrid1)', function(obj){
            var row = obj.data;
            Id=row.ID;
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        })
    }