Layui表格怎么实现点击某一行的任意位置即选中复选框

张开发
2026/5/5 5:16:18 15 分钟阅读
Layui表格怎么实现点击某一行的任意位置即选中复选框
layui table行点击选中复选框必须在done回调中绑定事件委托调用table.checkRow/toggleCheckRow更新状态过滤表头、操作列及复选框自身全选与单选需配合checkStatus校验并手动维护跨页选中状态。layui table 行点击选中复选框的 DOM 事件绑定位置必须在 done 回调里操作不能在 init 阶段或表格渲染前绑。因为 table.render() 是异步渲染tbody 内容初始为空直接查 .layui-table-body 下的 tr 会找不到节点。用 done: function(res, curr, count) { ... } 确保表格 DOM 已就绪推荐用事件委托绑定到 .layui-table-body .layui-table监听 tr 的 click避免对每行重复绑定——委托一次就够了否则翻页后失效或重复触发如何正确触发 layui 复选框的选中状态更新不能直接改 input[typecheckbox] 的 checked 属性否则 layui 的样式如 .layui-form-checkbox[lay-skinprimary]和内部选中状态不同步会导致 UI 和数据不一致。必须调用 table.checkRow(tableId, data) 或 table.toggleCheckRow(tableId, data)data 要是该行原始数据对象即 res.data[index]不是 DOM 元素获取行数据得靠 $(tr).data(index) 拿索引再从 res.data 中取或者用 table.cache[tableId][index]如果用了 id 字段作为唯一标识更稳妥先用 $(tr).data(id) 取 id再遍历 table.cache[tableId] 匹配点击区域排除表头、操作列、复选框本身用户点表头、点“操作”按钮、点已有的复选框时不该再触发二次选中否则逻辑错乱。需要过滤掉这些区域。 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

更多文章