layui多层表头功能实现

时间:2024-04-05 09:45:41

在使用layui创建表格时,需要使用layui中的数据表格多层表头的方法。多层表头是由:
colspan和rowspan这个两个参数配合使用。
layui多层表头功能实现

例子:一个学院中的专业信息要包含着专业名称和专业编号。 效果图如下:
layui多层表头功能实现

代码:
layui多层表头功能实现

思路:在多层表头写出后,各个的表头位置都是没有在指定位置上,需要依靠colspan和rowspan这个两个参数把各个表头定义好位置。
(1)rowspan:行数 ,可以看到图中的序号,学院名称和操作是占两行的,所以在这三行上写上rowspan:2。专业名称和专业编号是第二层也没给上行占2行(rowspan:2),所以两个表头自然在还在第二层占1行
(2)colspan:列数,在专业信息是要包裹下面两个名称和编号的所以加上colspan:2,就可以把两列包含。
总结:不需要包含的就扩行,要包含列的就扩列。