Layui表格怎么删除选中行

千辰大大_1863

千辰大大_1863

2026-03-26

406人浏览

原创

监听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 是否同步减少,否则翻页时最后一页可能空白
删行看着简单,真正卡住人的永远是「删了哪儿」和「谁还记得删过」——DOM、缓存、原始数据、服务端,四者不同步,就会反复出现“明明删了怎么还在”的问题。
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2600

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2433

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

120

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

100

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

80

12

PDF转图片方法
PDF转图片方法

需要把 PDF 页面用于上传、预览、分享或图片归档时,PDF 转图片方法专题整理 JPG/PNG 格式选择、逐页导出、清晰度设置、批量下载和结果检查等流程,帮助用户稳定完成 PDF 图片化处理。

2026.09.30

60

26

PixTV AI视频生成与无限画布创作
PixTV AI视频生成与无限画布创作

PixTV专题整理AI视频与视觉内容创作相关功能使用教程,涵盖AI生图、视频生成、无限画布、多模型创作、素材管理、声音音乐及视频剪辑等功能,帮助用户快速掌握PixTV从创意到成片的完整制作方法。

2026.09.29

80

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习