讲师中心 微信公众号
AI工具推荐 视频效率加速

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

夏瑶同学_3767

夏瑶同学_3767

发布时间:2026-10-28 10:56:17

|

554人浏览过

|

来源于php中文网

原创

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 状态的一致性——漏掉任意一环,就会出现“界面上看着对,数据库里是错的”这种难排查问题。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

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

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

2703

2023.08.11

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

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

5863

2023.10.09

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

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

6830

2024.03.19

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

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

6558

2024.03.22

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

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

943

2024.05.22

json数据格式
json数据格式

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

2195

2023.08.07

json是什么
json是什么

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

3462

2023.08.23

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

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

1156

2023.10.13

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

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

精品课程

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

共87课时 | 13.1万人学习

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

共89课时 | 11.4万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn