layui数据表格多级表头后台数据格式是怎样的 - Fly社区​fly.layui.com
实现常用两级表头：
html;
<div class="layui-colla-item">
    <h2 class="layui-colla-title">转班记录</h2>
    <div class="layui-colla-content layui-form-item layui-show">
        <table class="layui-table" id="transferList" lay-filter="transferList">	        	
        </table>
    </div>
</div>
js;
/*转班记录*/
cols = [
        [
		    {type: 'checkbox', fixed: 'left', rowspan:2},
		    {title: '转班学期',field:'field1', width:120, rowspan:2},
	 		{title: '转班前', align:'center', colspan:4},
	 		{title: '转班后', align:'center', colspan:4},
	 		{title: '转班原因',field:'field12', width:120, rowspan:2},
	 		{title: '操作', width: 120, toolbar:'#layerToolbar', rowspan:2}
	 	],
	 	[
			{title: '项目部',field:'field3', width:120},
			{title: '专业',field:'field4', width:120},
			{title: '年级',field:'field5', width:120},
			{title: '班级',field:'field6', width:120},
			{title: '项目部',field:'field7', width:120},
			{title: '专业',field:'field8', width:120},
			{title: '年级',field:'field9', width:120},
			{title: '班级',field:'field10', width:120},
 		 ]
 	 ]
	var transferList = table.render({
	            elem: '#transferList' //指向存放分页的容器
	            ,cols:cols //表头
	            ,page: false //是否显示分页
	            ,toolbar:toolbar //开启工具栏
	            ,limit: 1000 //每页默认显示的数量
		    ,defaultToolbar:[]
			,data:[]
	    });
效果；
模拟Json;
/*转班记录*/
var data =[{
		'field1':'转班学期1',
		'field2':'转班原因1',
		'field3':'前项目部1',
		'field4':'前专业1',
		'field5':'前年级1',
		'field6':'前班级1',
		'field7':'后项目部1',
		'field8':'后专业1',
		'field9':'后年级1',
		'field10':'后班级1'
	}];

错误原因：
  记录下使用layUI多级表头时犯的一个错误，其实主要原因是我多写了一个逗号 “ , ” 导致报错的，我的表格只有2级表头，在第二级时多写了一个逗号
错误提示：
layui.all.js?v=1.1.1:179 Laytpl Error：TypeError: Cannot read property 'fixed' of undefined
<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">{{# var left, right; }}<div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table></div><div class="layui-table-body layui-table-main"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div>{{# if(left){ }}<div class="layui-table-fixed layui-table-fixed-l"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.fixed && item2.fixed !== "right"){ }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table></div><div class="layui-table-body"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div></div>{{# }; }}{{# if(right){ }}<div class="layui-table-fixed layui-table-fixed-r"><div class="layui-table-header"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><thead>{{# layui.each(d.data.cols, function(i1, item1){ }}<tr>{{# layui.each(item1, function(i2, item2){ }}{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}{{# if(item2.fixed === "right"){ right = true; } }}{{# if(item2.fixed === "right"){ }}{{# if(item2.checkbox){ }}<th data-field="{{ item2.field||i2 }}" data-type="checkbox" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-checkbox"><input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}></div></th>{{# } else if(item2.space){ }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} unresize="true"><div class="layui-table-cell laytable-cell-space"></div></th>{{# } else { }}<th data-field="{{ item2.field||i2 }}" {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize){ }}unresize="true"{{# } }}>{{# if(item2.colspan > 1){ }}<div class="layui-table-cell laytable-cell-group" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span></div>{{# } else { }}<div class="layui-table-cell laytable-cell-{{d.index}}-{{item2.field||i2}}" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}><span>{{item2.title||""}}</span>{{# if(item2.sort){ }}<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc"></i><i class="layui-edge layui-table-sort-desc"></i></span>{{# } }}</div>{{# } }}</th>{{# }; }}{{# }; }}{{# }); }}</tr>{{# }); }}</thead></table><div class="layui-table-mend"></div></div><div class="layui-table-body"><table cellspacing="0" cellpadding="0" border="0" class="layui-table" {{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}><tbody></tbody></table></div></div>{{# }; }}{{# if(d.data.page){ }}<div class="layui-table-tool"><div class="layui-inline layui-table-page" id="layui-table-page{{d.index}}"></div></div>{{# } }}<style>{{# layui.each(d.data.cols, function(i1, item1){layui.each(item1, function(i2, item2){ }}.laytable-cell-{{d.index}}-{{item2.field||i2}}{ width:{{item2.width||50}}px }{{# });}); }}</style></div>
error @ layui.all.js?v=1.1.1:179
t.pt.parse @ layui.all.js?v=1.1.1:199
t.pt.render @ layui.all.js?v=1.1.1:203
H.render @ layui.all.js?v=1.1.1:4722
H @ layui.all.js?v=1.1.1:4706
d.render @ layui.all.js?v=1.1.1:5048
listRegistration @ sign_regisrationCountList.js?v=1.1.3:21
onclick @ sign_regisrationCountList.jsp?1=1&loginMenuId=01ffadb7-0a28-4f89-9c6d-aadf1dcf3934:91
layui.all.js?v=1.1.1:1807 Uncaught Error: Syntax error, unrecognized expression: Laytpl Error：TypeError: Cannot read property 'fixed' of undefined
    at Function.t.error (layui.all.js?v=1.1.1:1807)
    at t.tokenize (layui.all.js?v=1.1.1:1989)
    at t.select (layui.all.js?v=1.1.1:1998)
    at Function.t [as find] (layui.all.js?v=1.1.1:1514)
    at pe.fn.init.find (layui.all.js?v=1.1.1:2049)
    at new pe.fn.init (layui.all.js?v=1.1.1:2063)
    at pe (layui.all.js?v=1.1.1:1377)
    at H.render (layui.all.js?v=1.1.1:4722)
    at new H (layui.all.js?v=1.1.1:4706)
    at Object.d.render (layui.all.js?v=1.1.1:5048)
t.error @ layui.all.js?v=1.1.1:1807
t.tokenize @ layui.all.js?v=1.1.1:1989
t.select @ layui.all.js?v=1.1.1:1998
t @ layui.all.js?v=1.1.1:1514
find @ layui.all.js?v=1.1.1:2049
pe.fn.init @ layui.all.js?v=1.1.1:2063
pe @ layui.all.js?v=1.1.1:1377
H.render @ layui.all.js?v=1.1.1:4722
H @ layui.all.js?v=1.1.1:4706
d.render @ layui.all.js?v=1.1.1:5048
listRegistration @ sign_regisrationCountList.js?v=1.1.3:21
onclick @ sign_regisrationCountList.jsp?1=1&loginMenuId=01ffadb7-0a28-4f89-9c6d-aadf1dcf3934:91

主要代码：
table.render({
        height:'400'
        ,elem: '#registration'
        ,cols: [
            //一级表头
            [
            {rowspan: 2,field: 'myIndex',title: '序号',width: 60, align: "center"}
            ,{rowspan: 2,field: 'patientName', title: '姓名', width: 60, align: "center"}
            ,{rowspan: 2,field: 'patientGender', title: '性别', width: 60, align: "center"}
            ,{rowspan: 2,field: 'patientIdNo', title: '身份证', width: 180, align: "center"}
            ,{rowspan: 2,field:'signNum', title: '签约编码', width: 100, align: "center"}
            ,{rowspan: 2,field: 'patientTel', title: '联系电话', width: 120, align: "center"}
            ,{title: '签约家庭类别', colspan:7}
            ,{title: '重点人群签约服务项目数', colspan:7}
            ,{title: '其他人群', colspan:5}
            ,{rowspan: 2,field: 'serpkName', title: '签约服务包类型', width: 100, align: "center"}
            ,{rowspan: 2,field: 'remark', title: '备注', width: 80, align: "center"}
            ]
            //二级表头
            ,[
                //签约家庭类别
                {field:'disabilitiesInFamily', title: '计生失独伤残家庭', width: 70, align: "center"}
                ,{field:'familyOnlyChild', title: '计生独生子女', width: 70, align: "center"}
                ,{field:'familyPlanningTwoWomen', title: '计生双女', width: 70, align: "center"}
                ,{field:'fiveInsuredHouseholds', title: '五保户', width: 70, align: "center"}
                ,{field:'lowInsuredHouseholds', title: '低保户', width: 70, align: "center"}
                ,{field:'fileCardPoor', title: '建档立卡贫困人口', width: 70, align: "center"}
                ,{field:'hsOther', title: '其他', width: 70, align: "center"}
                //重点人群签约服务项目数
                ,{field:'elderly', title: '老年人', width: 70, align: "center"}
                ,{field:'patientsWithHypertension', title: '高血压患者', width: 70, align: "center"}
                ,{field:'typeTwoDiabetes', title: '2型糖尿病患者', width: 70, align: "center"}
                ,{field:'patientsWithMentalDisorders', title: '严重精神障碍患者', width: 70, align: "center"}
                ,{field:'tuberculosisPatients', title: '结核病患者', width: 70, align: "center"}
                ,{field:'maternal', title: '孕产妇', width: 70, align: "center"}
                ,{field:'childernAgedZeroToSix', title: '0-6岁儿童', width: 70, align: "center"}
                //其他人群
                ,{field:'disabled', title: '残疾人', width: 70, align: "center"}
                ,{field:'patientsWithCereBrovascularDisease', title: '脑血管病患者', width: 70, align: "center"}
                ,{field:'coronaryHeartDiseasePatients', title: '冠心病患者', width: 70, align: "center"}
                ,{field:'cancerPatients', title: '癌症患者', width: 70, align: "center"}
                ,{field:'others', title: '其他', width: 70, align: "center"}
            ]
        ]
        ,id: 'registration'
        ,url: 'statisticalReportsAction.action'
        ,where: {act: 'registrationStatisticalList',strJson:JSON.stringify(qvo)}
        ,method: 'post'
        ,skin: 'row' //表格风格
        ,even: true
        ,page: true //是否显示分页
        ,limits: [5,10,15,20,25,50,100,200]
        ,limit: 10 //每页默认显示的数量
        ,done: function(res, curr, count){
            if (res.data != null) {
                vos = res.data;
                numberCount = res.data.length;
            }
            // //遮罩关闭
            // layer.close(index);
        }
    });


本次记录到此结束，欢迎订阅、关注、收藏、评论、点赞哦～～(￣▽￣～)～
哇咔咔(∪｡∪)｡｡｡zzz

table 模块是Layui的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载(比如搜索、条件筛选等)，支持复选框，支持分页，支持单元格编辑等等一些列功能。
我们在使用过程中，如果需要关闭Layui表格table拖拽列宽、禁用拖拽列宽，可以用到unresize参数：是否禁用拖拽列宽(默认：false)。默认情况下会根据列类型(type)来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。
实例：这里设置为unresize: false,即可.layui.use(['form', 'table'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table;
table.render({
elem: '#currentTableId',
url: '',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'id', width: 80, title: 'ID', sort: true},
{field: 'username', minwidth: 80, title: '账号'},
{field: 'admin_realname', minwidth: 80, title: '姓名'},
{field: 'created_at', width: 150, title: '管理员级别'},
{field: 'created_at', title: '添加时间',  width: 160, sort: true},
{field: 'updated_at', width: 160, title: '最近修改', sort: true},
{field: 'stop', width: 80, title: '状态', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 15,
page: true,
unresize: false,
// skin: 'line',
response: {
statusName: 'code' //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: 'msg' //规定状态信息的字段名称，默认：msg
,countName: 'count' //规定数据总数的字段名称，默认：count
,dataName: 'data' //规定数据列表的字段名称，默认：data
}
});
});

Layui渲染多级表头和设置表格颜色

开发工具与关键技术：VS  MVC

作者：木林森

撰写时间：2019年7 月29 日

在做项目的过程中，我遇到了许多多级表头的渲染，因为之前也做过很多layui表格的渲染，我就以为两个表头的渲染和一个表头的一样，但是当我写两个表的渲染时，想要的样式却迟迟弄不出来。后来我又自己写HTML，设定好一级表头的样式，给它一个固定的宽度，然后在二级表头处又设置一定的宽度，那样虽然弄出了想要的样式，但是当表格的列数过多时，它就会出现页面“抽搐”的现象，所以最后我还是上网搜索了layui的网站，功夫不负有心人吧，我很快就找到了方法，下面看看我是怎么做的吧

首先跟一个表的渲染一样，先var声明一个全局变量，然后就是最重要的一步——多表头的渲染了，它是写在cols 里面的，简要样式：cols:[[一级表头],[二级表头]]，例子代码如图1：



图1

其实多级表头最重要的就是图中标出的colspan，它代表的是横跨下一级表头的单元格数，除了横跨的外还有一个纵向的，纵向的用rowspan，它使用的方法和横跨的一样，colspan和rowspan也就决定了该表是否为多级表头。

看完代码，那看看效果如何吧，效果如图2：

 图2

咦，好像哪里不对，是不是样式完成了效果却不明显呢，又一个问题出现了，话不多说盘它！

即然是设置多级表头，那我就给表头设置样式好了，记得好像可以用done设置，要不试试？

先看看代码有没有错（图3）：再看看效果（图4）：



图3
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190729215637914.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzMwNw==,size_16,color_FFFFFF,t_70)

图4
咦……怎么还是很丑，难道还要设置行的样式？且先写着看看：



图5
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190729215655536.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzMwNw==,size_16,color_FFFFFF,t_70)

图6
好像还可以，但是为何一级表头的顶部边框会没有呢，难道刚才设置的th对一级表头不起作用？尝试n种一级表头的设置后，我还是弄不出那个……所以请看到这里的小伙伴提点一下我，拜托了，我会看评论的。

当然在一级表头处设置不了，我就得换种思路了，一级表头的顶部边框不就是意味着能在表格头部工具栏设置底部边框嘛，那就试试，看看能不能得到想要的效果喽。

设置工具栏的代码如图7



图7

效果如图8



图8

看来效果还是可以的，但是那个问题我还没有找到方法，所以在线求解，希望知道如何解答的小伙伴不吝赐教！