应使用 on('checkbox', ...) 事件获取选中数据,通过 obj.checked 和 obj.data 实时增减金额总和;全选时需用 table.checkStatus() 重算,避免累加器误差;状态更新异步,勿在回调内立即调用 checkStatus。

layui table 勾选行后怎么拿到选中数据
关键不是监听点击,而是用 on('checkbox', ...) 事件——它在勾选状态变化时触发,且自带当前行数据和全选状态。直接取 obj.checked 和 obj.data 就行,别去手动维护 checkedRows 数组,容易漏同步。
常见错误是绑定 click 到复选框上,结果全选/取消全选时拿不到批量变化;或者用 table.checkStatus() 轮询查状态,性能差还可能错过中间态。
-
obj.data是当前这行的原始数据对象(含金额字段) -
obj.checked是布尔值,表示这一行本次是否被勾选 - 全选操作会触发多次该事件(每行一次),不是只触发一次
金额总和计算逻辑写在哪最合适
就写在 on('checkbox', ...) 回调里,但别每次遍历全部表格数据——性能扛不住。应该维护一个实时累加器:勾选时加,取消时减。
示例场景:金额字段叫 price,初始总和为 0:
let sum = 0;
table.on('checkbox(test)', function(obj){
if(obj.checked){
sum += parseFloat(obj.data.price) || 0;
} else {
sum -= parseFloat(obj.data.price) || 0;
}
$('#sum-display').text(sum.toFixed(2));
});
注意:parseFloat 防止字符串导致 NaN;|| 0 处理空值或非数字;别用 parseInt,金额要保留小数。
全选/取消全选时总和不准怎么办
因为全选会高频触发多次 checkbox 事件,而你的累加器没做防抖或状态校验,容易算错。根本解法是:全选状态下,直接调用 table.checkStatus() 拿当前全部选中行,重新求和。
- 加个标志位判断是否处于全选操作中(比如监听
tool(test)事件里点全选按钮) - 或更简单:在
checkbox回调开头加if(obj.type === 'all') return;,然后单独监听tool事件处理全选逻辑 - 全选后的总和必须走一遍
table.checkStatus().data重算,不能依赖累加器
为什么用 table.checkStatus() 查不到刚勾选的行
不是查不到,是你调用时机错了——必须在事件回调执行完之后再查。Layui 的勾选状态更新是异步的,如果在 checkbox 回调里立刻调 table.checkStatus(),拿到的还是旧状态。
正确做法只有两个:
- 自己维护选中行数组(推荐用于小数据量)
- 在回调末尾用
setTimeout(..., 0)延迟一帧再查table.checkStatus()
但延迟查只是补救,不如直接用回调里的 obj.data 和 obj.checked 做增量计算来得稳。

















