Layui表格单元格编辑edit如何实现失焦自动保存到数据库

轻丽酱_6306

轻丽酱_6306

2026-04-17

993人浏览

原创

layui table edit失焦后需用table.on('edit(filtername)')监听而非原生blur事件,它在真正完成编辑时触发并提供新旧值等参数;保存前须trim、校验、防重复提交,并同步更新缓存或重载表格。

layui表格单元格编辑edit如何实现失焦自动保存到数据库

layui table edit 失焦后怎么触发保存?

Layui 的 edit 属性只负责渲染可编辑输入框,**不会自动保存**,更不会发请求。所谓“失焦保存”,得自己监听 blur 事件,再调用 table.cache 拿到当前行数据,手动提交。

常见错误是直接在列配置里写 edit: 'text' 就以为完事了,结果改完一失焦,页面刷新数据就回退——因为压根没发请求,也没更新缓存。

  • 必须给表格容器绑定 blur 事件,且委托到 .layui-table-edit 输入框上(动态生成的)
  • 通过 $(this).closest('tr') 找到行索引,再用 table.cache['your-id'][rowIndex] 拿原始数据
  • 注意:table.cache 里的值是修改后的,但可能含空格、未 trim,别直接当最终值用
  • 如果用了 lay-filter,推荐用 table.on('edit(filterName)', ...) 监听,它比手动绑 blur 更稳(内部已做防抖和焦点判断)

用 table.on('edit') 而不是原生 blur 的原因

table.on('edit(filterName)') 是 Layui 封装好的编辑事件,它在用户确认编辑(失焦或回车)后触发,并自带当前行、字段、新旧值,省去手动找 DOM 和解析的麻烦。

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

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

下载

原生 blur 容易误触:比如点击表头排序、切换分页、弹出 layer,都会导致输入框失焦,但此时用户根本没想保存。

  • table.on('edit') 只在真正完成一次编辑时触发(包括回车、点击其他单元格、点击空白处)
  • 回调参数 obj 有 obj.tr(当前行 DOM)、obj.field(字段名)、obj.value(新值)、obj.oldValue(旧值)
  • 若需阻止默认行为(比如校验失败不保存),可直接 return false
  • 兼容性更好:Layui 2.8+ 对 edit 事件做了 focus/blur 冲突处理,老版本手动绑 blur 容易漏掉回车场景

保存前要校验和清理哪些内容?

用户输的内容不能直接塞进数据库:空格、换行、超长、特殊字符、非数字类型都可能引发后端报错或注入风险。

  • 用 $.trim() 去首尾空格,避免“ 123 ”被当成不同值反复提交
  • 对数字字段,用 parseFloat() 或正则过滤非数字字符,防止用户输“123元”导致后端转换失败
  • 长度限制建议前后端双校验;前端用 value.length > 50 提前拦截,别等接口返回 400
  • 敏感字段(如用户名、邮箱)建议加 type="text" + pattern 或 JS 正则校验,减少无效请求
  • 若该字段是下拉选择(edit: 'select'),obj.value 是 option 的 value,不是文本,别拿错

发请求保存时容易忽略的三个点

保存动作看似简单,但实际线上最容易出问题的是请求时机、重复提交、以及缓存同步。

  • 必须加 loading 状态(比如禁用输入框或加 lay-submiting 类),否则用户狂点会发出多个相同请求
  • 成功后建议调用 table.reload() 或手动更新 table.cache,否则页面显示还是旧值,用户以为没保存成功
  • 如果后端返回失败(如唯一键冲突),要在 UI 显示具体错误(比如用 layer.tips() 标红单元格),而不是只 console.error
  • 注意:Layui 表格不维护服务端状态,cache 是纯前端快照,哪怕后端已改库,前端不 reload 就永远不知道
事情说清了就结束。最常漏的是:没清空 loading 状态、没处理后端失败反馈、以及把 obj.value 当成原始输入(其实它已经被 Layui trim 过、转义过)。这些细节不卡点,上线后就卡用户。

相关文章

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

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

下载

相关标签:

layui

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

相关专题

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

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

2023.08.11

2463

5

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

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

2023.10.09

5343

6

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

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

2024.03.19

6390

13

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

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

2024.03.22

5978

10

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

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

2024.05.22

843

5

ajax教程
ajax教程

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

2023.06.14

2800

4

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

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

2023.08.31

360

5

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

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

2023.11.15

2633

5

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

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

2024.09.24

1161

6

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习