监听Delete键需绑定document并防重复;批量删须核对tableId;obj.del()仅删DOM和缓存,需同步更新数据源;删后异常主因是table.cache未及时更新或reload时机不当。
监听键盘 Delete 键删除单行:必须绑定在 document 上,且需防重复绑定
直接按 delete 键删选中行是常见需求,但很多人写完 document.onkeydown 发现只生效一次,或者点了别的地方就失灵——根本原因是事件监听器被反复覆盖或未正确触发。layui 表格本身不接管键盘事件,得自己桥接。
-
obj.tr.addClass('layui-table-click')这步不能省,否则obj.del()会找不到上下文 - 监听必须挂到
document,而不是表格容器,因为焦点可能不在表格内(比如刚编辑完输入框) - 每次点击行都重新赋值
document.onkeydown会导致前一个监听丢失,建议用document.addEventListener('keydown', ...)并在页面初始化时绑定一次 - keyCode
46是 Delete 键没错,但注意 Mac 上部分浏览器可能需要同时判断e.key === 'Delete'
批量删除 checkbox 选中行:别漏掉 id 参数和 checkStatus 的 tableId
用复选框批量删,最常卡在 table.checkStatus('xxx') 返回空数组——十有八九是传错 tableId。这个字符串必须和 table.render({ id: 'xxx' }) 里定义的完全一致,不是 elem 的 ID,也不是 lay-filter 的值。
- 初始化表格时务必显式写
id: 'myTable',否则checkStatus查不到缓存数据 -
checkStatus.data返回的是当前页已勾选的原始数据对象,不是 DOM 行节点,别试图对它调del() - 批量删后调
table.reload('myTable')才能刷新视图;如果用的是本地data源,还得手动从源数组里splice或filter掉对应项
obj.del() 删除工具栏按钮行:只删 DOM 和缓存,不碰原始数据源
点“删除”按钮调 obj.del() 看似一气呵成,但刷新页面或重新加载表格后,那行又回来了——因为 obj.del() 只移除了 TR 元素和内部缓存,没动你传给 table.render 的 data 数组或后端接口。
- 如果是静态
data: [...]初始化,删完得同步修改该数组,否则table.reload()会重绘原数据 - 如果是异步
url加载,obj.del()后应立刻发请求删服务端数据,成功后再调table.reload()或用table.cache手动清理 - 别在
tool回调里直接改obj.data属性,它只是快照,改了不影响表格状态
为什么删完行后排序/分页异常?重点查 table.cache 和 reload 时机
删行后点排序图标,发现数据错乱、序号跳变,甚至报 Cannot read property 'length' of undefined——这通常是因为 table.cache 缓存没及时更新,或者 reload 时没传新参数。
-
table.cache['myTable']是 layui 维护的内存快照,obj.del()会自动更新它,但批量删或键盘删不会 - 手动删数据后,要么调
table.reload({ data: newData })显式传新数组,要么清空缓存再重载:delete table.cache.myTable; table.reload('myTable') - 如果用了
page: true,删完别忘了检查count是否同步减少,否则翻页时最后一页可能空白










