前言
在做报表表头时遇到一个问题,如果表头对齐了,下面的数据对不上;如果根据数据顺序情况去修改数据配置时,数据能对上但表头又不是想要的表头了,在请教前辈后发现了问题的所在。目前网上没有关于这个问题的介绍,所以记录一下。
不想看过程的点击目录直接看结论就好了。
过程
要实现的表头效果:
错误配置
按照此表头写出如下配置:
var co1=[[
{
field: "field1",
title: "1",
rowspan: 4
},{
title: "2",
colspan: 6
},{
field: "field3",
title: "3",
rowspan: 4
}],[
{
title: "4",
rowspan: 2,
colspan: 2
},{
title: "5",
colspan: 3
},{
field: "field6",
title: "6",
rowspan: 3
}],[{
field: "field9",
title: "9",
rowspan: 2
},{
title: "10",
colspan: 2
}],[
{
field: "field7",
title: "7"
},{
field: "field8",
title: "8"
},
{
field: "field11",
title: "11"
},{
field: "field12",
title: "12"
}]];
表头按配置是完好的展示出来了,但是从第二列数据开始与列头无法对应,但是再三检查下,按照表头配置协议上面配置的完全是没有问题的。
修改方法
在前辈的建议下,把表头修改为如下格式,改动为把4号格的两行高改为1行,同时让其下方格7和8占用两行。
按照此表头写出新的配置
var co1=[[
{
field: "field1",
title: "1",
rowspan: 4
},{
title: "2",
colspan: 6
},{
field: "field3",
title: "3",
rowspan: 4
}],[
{
title: "4",
colspan: 2
},{
title: "5",
colspan: 3
},{
field: "field6",
title: "6",
rowspan: 3
}],[
{
field: "field7",
title: "7",
rowspan: 2
},{
field: "field8",
title: "8",
rowspan: 2
},{
field: "field9",
title: "9",
rowspan: 2
},{
title: "10",
colspan: 2
}],[
{
field: "field11",
title: "11"
},{
field: "field12",
title: "12"
}]];
达到目标效果。
总结
当使用多级表头时,尽可能让占多行的格子位于表头的最下方,也就是带有rowspan的配置项要有field属性,可以避免遇到的这种表头和数据不对应的问题。
layui版本:2.5.6