最直接有效的方法是在该列cols配置中显式设置sort: false,Layui会移除lay-sort属性、隐藏排序箭头并跳过事件绑定;必须使用JS布尔字面量true/false,不可写字符串或数字。
设置列的 sort: false 是最直接有效的做法
想让某列表头点击完全不触发排序(包括图标显示、事件响应、重载逻辑),就在该列的 cols 配置中显式写 sort: false。layui 会据此移除 lay-sort 属性、隐藏排序箭头,并跳过对该列的排序事件绑定。
常见错误是只写 sort: "false" 或 sort: 0,这会被当成真值处理,实际等同于 sort: true。必须用 JS 布尔字面量。
-
sort: false后,点击该列表头不会触发任何排序行为,也不会调用table.on('sort()') - 若该列同时设了
templet,sort: false仍生效,不影响模板渲染 - 多级表头下,
sort: false需写在叶子列(即含field的最内层配置)上,父级标题列设了无效
需要保留排序图标但禁用点击响应?得配合 CSS 和 unresize: true
有些场景要求视觉上看起来“可排序”(比如统一风格的箭头),但实际点击不触发任何逻辑。Layui 没提供原生开关,得手动干预:
- 先设
sort: true确保图标渲染出来 - 加
unresize: true防止列宽拖拽干扰(非必需,但推荐) - 用 CSS 隐藏排序区域:
.layui-table th[data-field="yourField"] .layui-table-sort { display: none; } - 再通过事件委托拦截剩余点击:
$(document).on('click', 'th[data-field="yourField"]', function(e) { e.preventDefault(); e.stopPropagation(); });
注意:仅靠 CSS 隐藏不够,因为用户仍可能点击到 th 文本区域并意外触发默认行为;preventDefault() + stopPropagation() 是双重保险。
为什么不能在 done 回调里用 off('click') 解绑?
有人试图在 table.render() 的 done 回调中执行 layui.$(th).off('click') 来移除排序事件,这会导致不可逆的副作用:
- 整个表格的排序状态管理被破坏,
table.sort()手动调用失效 - 后续
table.reload()可能无法正确还原排序图标状态 - 如果表格启用了
fixed: true,解绑还可能影响固定列的 DOM 同步逻辑 - 事件监听器是动态注册的,
off只作用于当前实例,表格重绘后又恢复原状,治标不治本
本质上,Layui 的排序不是挂在一个简单 click handler 上,而是嵌套在内部事件流和状态机里。绕过配置层强行解绑,等于拆发动机盖去拧螺丝。
表头点击事件被 toolbar 或 defaultToolbar 拦截怎么办?
如果你启用了 toolbar: true 或 defaultToolbar: ['filter', 'print'],它们内部也监听了 th 点击,且捕获顺序早于你的自定义绑定。结果就是:你写的事件根本收不到。
解决办法只有两个:
- 关闭相关 toolbar:
toolbar: false或精简为toolbar: '#myToolbar'(用自定义模板) - 改用
table.on('header(test)', ...)监听——这是 Layui 提供的官方 header 事件通道,它在 toolbar 处理之后触发,且自带字段过滤能力
但注意:table.on('header()') 仅对 sort: true 的列生效;如果目标列已设 sort: false,这个监听器就收不到它的点击。此时只能回到文档级委托 + data-field 过滤的老路。











