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

最新推荐文章于 2025-06-24 13:27:13 发布

木林森屿城

最新推荐文章于 2025-06-24 13:27:13 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44543307/article/details/97687794

在项目开发中，作者遇到Layui多级表头渲染的问题。通过研究，发现关键在于`cols`内的`colspan`和`rowspan`属性来创建多级表头。在样式调整上，使用`done`回调设置表头样式，并尝试通过修改行和工具栏样式解决一级表头顶部边框缺失的问题，但仍未找到理想解决方案，寻求社区帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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