必须配置 checkbox 列并设置 table ID 才能通过 checkStatus 获取选中行数;工具栏需监听 checkbox 事件手动更新显示,且 reload 后需缓存 ID 并调用 checkRow 恢复选中状态。
表格初始化时必须开启多选功能
不启用 checkbox 类型的列,checkstatus 就无法获取选中行数据。layui 表格的「当前选中行数」依赖底层的勾选状态管理,如果没配 type: 'checkbox',工具栏里再怎么写逻辑都拿不到选中数。
实操建议:
- 在
cols配置中第一列加上:{type: 'checkbox'} - 确保
id参数已设(如id: 'userTable'),这是后续调用checkStatus的唯一标识 - 不要用
radio替代 ——checkStatus只响应checkbox行为
工具栏模板里不能直接写 JS 表达式
Layui 的 toolbar 支持字符串模板或 DOM 元素,但不解析 JS 代码。像 {{ layui.table.checkStatus('userTable').data.length }} 这种写法不会执行,只会原样输出。
正确做法是手动更新工具栏区域内容:
- 给工具栏容器加个 ID,比如
id="tableToolbar" - 监听表格的
checkbox事件:table.on('checkbox(userTable)', ...) - 每次勾选变化后,调用
table.checkStatus('userTable')获取当前选中数据,再用document.getElementById(...).innerText = ...更新显示
监听 checkbox 事件时要注意节流和空状态
用户快速点选/取消时,事件可能高频触发;另外全选后取消全选、或首次渲染未选中时,checkStatus 返回的 data 是空数组而非 undefined,但长度仍可安全取。
关键细节:
- 别用
click直接绑 checkbox 元素 —— Layui 内部会重绘,DOM 引用容易失效 - 始终通过
table.checkStatus('userTable').data.length计算,不要自己维护计数器 - 建议加个简单节流(如
setTimeout+clearTimeout)避免频繁 DOM 更新 - 显示文案建议区分:0 条、1 条、2 条以上(例:
选中 ${len} 行或未选择)
注意表格重载(reload)后选中状态丢失
调用 table.reload() 默认清空所有勾选,即使你传了 where 或 page 参数。这意味着工具栏显示的「已选中 X 行」会在 reload 后变成 0,但用户心理预期可能是保留之前的选择。
若需保持选中状态:
- reload 前先用
checkStatus缓存主键 ID 数组(如ids = data.map(d => d.id)) - reload 完成后,在
done回调里遍历新数据,对匹配 ID 的行调用table.checkRow('userTable', {id: xxx}) - 别忘了 reload 后再次触发一次 checkbox 事件监听逻辑,让工具栏数值同步











