Layui Table 隐藏列的 jQuery 实现方案
作者:小满时间:2026-10-23 11:10:41浏览:476
Layui Table 组件未直接提供隐藏列功能,可通过 jQuery 获取表格容器对象,定位到对应列的 DOM 元素并动态添加 display:none 样式实现隐藏。该方法利用字段值定位元素,适用于需要动态控制列可见性的场景。
Layui Table 隐藏列实现背景
在编写本文档时,Layui 的 Table 组件尚未内置隐藏列的功能。
获取 TableBox 对象与添加隐藏样式
第一步:获取 Layui TableBox 的 jQuery 对象。
var _table_box = $(this._table_elem).next().find(".layui-table-box");
其中,this._table_elem 代表 Table 标签的 ID。

layui-table-box 是 Layui 框架定义的类名。
第二步:为需要隐藏的列添加 display: none 样式。
_table_box.find("[data-field="+value+"]").csss("display","none");
value 参数对应需要隐藏的列的 field 属性值。

以下是实现该功能的源码示例。

上述代码是对 Layui Table 进行的简单封装。
只要行对象中包含数据,即可提取出来。例如,列名显示为姓名、性别、年龄,而实际数据字段为 userid、username、sex、age。
即使列定义中未包含 userid 字段,在获取行数据时依然可以提取该值。
以上关于 Layui Table 隐藏列问题的解决方案由小编分享,希望能提供参考,也希望大家多多支持本站。
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
