layui中table数据表格隐藏列的方法介绍-木庄网络博客

2022-04-16 08:57:35 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者尚，侵删。

现在国内的模板，也就layui一家独大了，其中的数据表格功能强大，但我不会用python或者django拼接json，输出发送给数据表格，那只好用笨办法，循环遍历吧。

数据表格中保留id列，是为了编辑修改的时候获取改行数据的id值，但又不需要展示出来，所以需要隐藏。

id列的代码是：

1 2	`, cols: [[` `//标题栏` `{field:` `'data_id', title:` `'ID', width: 50,style:'display:none;'}`

这个代码就可以把下面的id列的值隐藏起来，但标题栏的id还在，那么，问题来了，就用强大的jquery解决呗。

1	`$('table.layui-table thead tr th:eq(0)').addClass('layui-hide');`

当有多个表格的时候，发现上面的代码只能把第一个表的第一列标题栏给隐藏起来，如果一个页面有多个表格需要用：

1	`$('table.layui-table thead tr th:nth-child(1)').addClass('layui-hide');`

还有问题，如果表格中有选择框，默认会占据表格第一列，这个时候，上面的代码就出错了。只能推到，使用第一个代码，一个一个的选择。注意，layui的数据表格，自动会生成5个表格：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者