layui table怎么监听单元格编辑事件(edit)并提交验证

夏瑶同学_3767

夏瑶同学_3767

2026-10-28

554人浏览

原创

table.on('edit(filter)') 是唯一入口,必须与 table.render 的 lay-filter 值严格一致(大小写、空格、引号均需匹配),且列须显式配置 edit: 'text';回调首行必写 e.preventDefault(),校验应在 blur 或 enter 时触发,更新仅用 table.updateCell,禁用 reload。

layui table怎么监听单元格编辑事件(edit)并提交验证

table.on('edit(filter)') 是唯一入口,但必须配对 render 的 lay-filter

监听 edit 事件不是“加个 on 就行”,而是严格依赖 lay-filter 值完全一致。比如你渲染表格时写的是 table.render({ elem: '#userTable', lay-filter: 'userTable' }),那监听就必须写 table.on('edit(userTable)', callback)——大小写、空格、引号都不能差。漏掉这个,控制台静默失效,连 warning 都不报。

常见错误现象:表格能编辑,但 edit 回调死活不触发。90% 是 filter 不匹配,剩下 10% 是列没加 edit: 'text'(比如只写了 templet 却忘了配 edit)。

  • 列配置必须显式声明 edit: 'text',否则该列不可编辑,edit 事件也不会触发
  • 如果用了 templet,默认禁用内置编辑;要保留模板又支持编辑,得手动加 contenteditable="true",但此时 edit 事件不再触发
  • 动态 reload 表格后,table.on('edit(...)') 不会自动继承,必须重新绑定一次

第一行必须写 e.preventDefault(),否则校验全是马后炮

layui 的 edit 事件是同步触发的,默认行为是立刻更新 DOM 和 table.cache。不拦住,非法值已经落库,再弹提示、再改 input 都晚了。所以回调里第一行只能是:e.preventDefault()。

e.value 是用户刚输的字符串,e.oldValue 在部分版本中不可靠(可能为 undefined),稳妥做法是从 DOM 取原始值:e.tr.find('td[data-field="' + e.field + '"]').text().trim()。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 别用 return false 替代 e.preventDefault(),它不阻止数据写入,只终止事件冒泡
  • 验证失败后,必须两步还原:先改 input 值,再改 td 文本,否则界面和缓存不一致
  • 还原后建议调 $(e.elem).focus().select(),光标回到输入框并全选,方便重输

校验时机必须是 blur 或 enter,不能一输入就发请求

edit 事件本身不是“编辑结束”的信号,它只是“值变了”。真实校验必须等用户明确提交——也就是失焦(blur)或按回车(keydown.enter)。在 edit 回调里给当前 input 绑定一次性事件最稳:

layui.jquery.one('blur', e.elem, function() {
  // 这里做校验、发请求、恢复、提示
});
  • 用 layui.jquery.one() 而不是 on(),避免重复绑定导致多次请求
  • 请求发出前给 input 加 disabled 或 class lay-editing,防连点
  • 移动端要注意键盘收起延迟,可加 setTimeout(..., 100) 兜底
  • 别在 templet 里写 oninput,DOM 重绘后事件丢失,校验逻辑直接失效

验证通过后只用 table.updateCell,禁用 reloadData

table.reloadData() 或 table.reload() 会销毁所有编辑态,正在 focus 的 input 瞬间消失,刚改的值也可能被接口返回的老数据覆盖。安全更新的唯一方式是:table.updateCell(e.id, e.field, e.value.trim())。

注意 e.id 必须对应真实主键字段。如果你在 cols 里写了 id: 'uid',那 e.id 就是该行 data.uid 的值;如果数据源里没有 uid 字段,或字段名拼错,updateCell 就找不到目标行。

  • 验证失败时,除了还原 input 和 td,还得手动更新 cache:table.cache['userTable'][e.trIndex][e.field] = oldValue
  • 提示要用 layer.tips(msg, e.tr.find('td[data-field="' + e.field + '"]'), {tips: [1, '#ff6a00']}),每次调用前先 layer.close(tipsIndex) 清旧提示
  • 数字字段校验别用 isNaN(+v),应先 v.trim() 再判断,否则 “123 ”会被当成合法数字

关键复杂点在于:edit 事件不是“提交完成”,而是“值变更开始”;真正需要拦截、校验、反馈、同步的整套流程,全得你手动补全。没人替你管缓存、DOM、UI 状态的一致性——漏掉任意一环,就会出现“界面上看着对,数据库里是错的”这种难排查问题。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

相关标签:

layui表格 layui

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

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2683

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5843

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6810

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6538

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

923

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2195

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3442

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1156

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3959

7

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.3万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习