Layui 2.x 中需通过 table.on('checkbox(filter)', callback) 监听勾选事件,并在回调中调用 table.checkStatus('filter') 获取当前页所有选中行数据数组,而非使用不存在的 getSelectRow 或 checkRow 方法。
layui table 选中行数据怎么拿?用 checkRow 或 getSelectRow 都不行
直接说结论:layui 2.x 的 table 模块本身没有 getselectrow 这个方法,也不存在官方 checkrow 函数——这是很多人卡住的第一步。真正能拿到选中行数据的,是监听复选框勾选事件后,调用 table.checkstatus。
- 必须先在
table.render中开启checkbox(或radio)类型列,否则没得选 -
table.checkStatus返回的是一个对象,关键字段是data(选中行原始数据数组)和data.length(数量) - 别在渲染完就立刻调
checkStatus,它只反映当前 UI 状态,不是“实时监听”,得配合on('checkbox(table-filter)')使用
如何监听勾选变化并取到最新选中数据
核心是绑定 checkbox 事件,而不是等用户点完再手动查——因为勾选/取消是异步更新 UI 状态的,手动查容易漏掉中间态。
- 给表格加唯一
id(如id="userTable"),并在render时设id: 'userTable' - 用
table.on('checkbox(userTable)', function(obj){...})监听,obj里有checked(是否勾选)、data(当前这行数据)、type(all或one) - 每次触发都调一次
table.checkStatus('userTable'),确保拿到完整选中集,不是单行 - 注意:如果用了分页,
checkStatus默认只返回当前页已勾选的行;跨页全选需配合laypage手动维护选中 ID 列表
table.on('checkbox(userTable)', function(obj){
var status = table.checkStatus('userTable');
console.log(status.data); // 当前页所有已勾选行的数据数组
});
为什么 obj.data 和 checkStatus().data 不一样
obj.data 是当前被操作的那一行的原始数据(带 id、username 等字段),而 checkStatus().data 是当前页所有已勾选项的完整快照。两者用途不同,别混用。
-
obj.data适合做「单行操作」,比如点击某行的「编辑」按钮时快速定位 -
checkStatus().data才是批量操作(如「删除选中」)的依据,它包含所有勾选项,且顺序与表格显示一致 - 如果表格用了
cols中的templet渲染字段,obj.data里仍是原始值,不是模板渲染后的 HTML 字符串 - 若开启了
loading: true且数据异步加载中,checkStatus可能返回空数组——得等done回调之后才稳定
多页全选时数据丢失?checkStatus 不跨页
Layui 的 checkStatus 天然只管当前页,这是设计使然,不是 bug。真要实现「全选所有页」,得自己记 ID。
- 监听
tool(table-filter)或自定义按钮,触发时遍历所有页数据(需提前缓存或重请求) - 更稳妥的做法:勾选时把
obj.data.id存进全局 Set 或数组,取消时删掉;提交时交这个集合给后端 - 别依赖
table.cache,它是内部缓存,结构不公开、不稳定,Layui 文档明确不建议直接读 - 如果后端支持按条件批量查,前端其实不需要真“记住”所有 ID,点提交时重新发一次查询请求更可靠
checkStatus 能跨页、或把 obj.data 当成全量选中数据来用。










