Layui数据表格如何实现行内编辑时的自动校验逻辑

煙雲

煙雲

2026-07-21

833人浏览

原创

Layui表格edit事件校验必须先调e.preventDefault()阻止默认行为,再从DOM取原始值校验,失败时手动恢复input和td文本,并用table.updateCell安全更新;绑定需匹配id、防重复、重绘后重绑,校验时机选blur或Enter。

edit事件里必须第一行写e.preventDefault()

不拦住默认行为,值已经写进table.cache和dom,校验就变成马后炮。layuiedit事件是同步触发的,e.value是用户刚输的字符串,e.oldvalue多数情况下不可靠——别信它,得从dom里拿原始值:e.tr.find('td[data-field="' + e.field + '"]').text().trim()

常见错误现象:没调e.preventDefault(),结果校验弹窗出来了,但表格里已经显示非法值,后端也收到了脏数据。

  • 绑定监听时,table.on('edit(test)', ...)里的test必须和table.render()中配置的id完全一致
  • 动态重绘表格(比如table.reload())后,必须重新绑定edit事件,否则监听失效
  • 避免重复绑定:检查是否在render外层多次执行了table.on('edit', ...)

校验时机选blurkeydown.enter,别用input

一输入就发请求,用户输“123”会触发三次请求,后端扛不住,UI也容易错乱。正确做法是在编辑结束时校验,不是开始时。

实操建议:在edit回调里,对当前input绑定一次blur(用layui.jquery.one('blur', ...))或监听keydown并判断e.keyCode === 13,然后e.preventDefault()阻止默认换行。

  • 请求发出前,给inputdisabledlay-editing类,防连点
  • 移动端要注意键盘收起延迟,blur可能滞后,可加setTimeout(..., 100)兜底
  • 别在templet里用oninput直接调函数——DOM重绘后事件丢失,容易漏绑

验证失败必须手动恢复input值和td文本

只改e.data[e.field]没用,那是只读快照;只弹layer.msg也不够,用户看到错误提示,但输入框还留着非法值,表格显示和内部状态不一致。

layui手机车牌号码键盘代码
layui手机车牌号码键盘代码

layui手机车牌号码键盘代码是一款基于jQuery跟layui制作的手机端车牌号码输入弹出键盘选择,支持新能源汽车车牌输入格式代码。

下载

恢复逻辑要两步走:e.tr.find('td[data-field="' + e.field + '"] input').val(oldValue) + e.tr.find('td[data-field="' + e.field + '"]').text(oldValue)。再补一句$(input).focus().select(),光标回到输入框并全选,方便重输。

  • 提示要用layer.tips(msg, targetTd, {tips: [1, '#ff6a00']}),定位到具体单元格,别用alert或全局msg
  • 每次提示前先layer.close(tipsIndex),否则多个提示堆叠在一块
  • 数字字段校验别用isNaN(+v),空格会被隐式转换,“123 ”变成123;应先v.trim()再判断

table.updateCell才是安全更新的唯一方式

校验通过后,不能调table.reloadData()table.reload(),整表重绘会清空所有编辑态,正在输入的input瞬间消失,用户刚打的字全丢。

真正生效的是table.updateCell({id: e.id, field: e.field, value: e.value.trim()})。注意e.id必须和你cols里声明的id: 'uid'字段值严格对应——如果数据源里没这个字段,或拼写错误(比如写成user_id但配置了id: 'uid'),updateCell就找不到目标行,静默失败。

  • 打印console.log(e.id, e.data)确认e.id是否等于e.data.uid(或你定义的主键字段)
  • 字段名含点号(如user.email)要转成['user']['email']访问缓存,直接e.data['user.email']取不到
  • templet列如果手动写了data-field属性缺失,updateCell也会失效,得检查渲染后的HTML里td有没有对应data-field
校验逻辑本身不难,难的是e.iddata-field、缓存结构三者始终对齐——错一个,编辑就像没发生过,连控制台都不报错。

相关文章

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

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

下载

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

相关专题

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

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

2023.08.11

1086

5

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

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

2023.10.09

2210

6

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

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

2024.03.19

2104

13

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

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

2024.03.22

2275

10

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

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

2024.05.22

334

5

json数据格式
json数据格式

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

2023.08.07

1533

5

json是什么
json是什么

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

2023.08.23

1400

1

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

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

2023.10.13

587

3

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

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

2025.09.10

1290

7

热门下载

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

精品课程

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

共87课时 | 11.4万人学习

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

共89课时 | 9.7万人学习

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

共5课时 | 1.5万人学习