layui table全选当前页需手动操作dom:在done回调中遍历.layui-table-body tbody tr,设置input[name="laytablecheckbox"]的checked为true,并同步table.cache中对应项的laychecked属性,最后调用form.render('checkbox')更新ui。

layui table 的 checkbox 全选当前页怎么写
layui 的 table.render() 默认「全选」是整表全选,不是当前页。要实现「只选中当前页所有行」,得绕过内置的 checkAll 事件,手动操作当前页数据对应的复选框 DOM。
关键点在于:layui 渲染后,每行 checkbox 的 name 是 layTableCheckbox,且当前页的行 DOM 都在 .layui-table-body tbody tr 下;而 layui 内部用 data-index 属性标记行序号(从 0 开始),这个序号是**当前页内序号**,不是全局 ID。
实操建议:
- 给「全选当前页」按钮绑定点击事件,不要用
table.on('checkbox')监听,而是直接操作 DOM - 先调用
table.cache['yourId']拿到当前页渲染的数据数组,确认长度,避免 DOM 数量和缓存不一致 - 遍历
$('.layui-table-body tbody tr'),对每个tr查找input[name="layTableCheckbox"],设为checked = true - 同时手动同步 layui 的内部选中状态:遍历
table.cache['yourId'],给每项加layChecked: true,否则翻页后状态丢失或table.checkStatus()不准
为什么不能直接触发 click() 或模拟 checkAll
layui 的 checkAll 事件绑定在表头 checkbox 上,触发它会走整表逻辑,不受分页限制;而手动 .click() 当前行 checkbox 又容易因渲染异步导致部分未挂载完成,造成漏选。
更麻烦的是:layui 2.8+ 对 layChecked 字段做了只读保护,直接改对象属性不会触发视图更新,必须配合 DOM 操作 + 缓存同步才稳定。
常见错误现象:
- 点了「全选当前页」,翻页后上一页还被记着 —— 没清空其他页的
layChecked - 勾选了但
table.checkStatus('id').data返回空数组 —— 忘了给缓存数据加layChecked: true - 表格有固定列或滚动,
.layui-table-body里 tr 数量 ≠ 当前页数据条数 —— 应该用table.cache长度做校验,而不是纯 DOM 计数
table.checkStatus() 返回的 data 为啥不包含未渲染的页
这是设计使然:table.checkStatus() 只返回当前已渲染进 DOM 的行所对应的数据(即 table.cache[...] 中 layChecked === true 的项),它根本不知道其他页存在什么数据。所以你“全选当前页”之后,checkStatus 返回的正是你要的那几条 —— 前提是你同步好了 layChecked 标志。
注意参数差异:
-
table.checkStatus('id').data→ 当前页已勾选的数据数组(依赖layChecked) -
table.checkStatus('id').data.length→ 就是当前页勾选项数,可用于禁用/启用操作按钮 - 没有「获取所有页已勾选」的内置方法,真要跨页记忆,得自己用数组 push/unshift 管理
带搜索和重载后的全选当前页还能用吗
能,但必须重绑。因为 table.reload() 或搜索触发重载后,DOM 和 table.cache 全新生成,之前加的 layChecked 会丢失,手动操作的 DOM 状态也不保留。
解决方案很简单:把「全选当前页」的逻辑封装成函数,然后在 done 回调里重新绑定按钮事件,或者监听 table.on('render(id)')(注意不是 done,render 才保证 DOM 已就绪)。
性能提醒:
- 不要在
done里直接操作 DOM,可能早于渲染完成,推荐用setTimeout(fn, 10)或监听render事件 - 如果表格行数超 500,遍历 DOM + 设
checked会有卡顿,可改用document.querySelectorAll(...).forEach()提升一点效率,但本质还是 DOM 批量操作,别指望毫秒级











