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

Layui表格单元格编辑后如何同步更新到数据库

云静小哥_4607

云静小哥_4607

发布时间:2026-05-04 06:47:42

|

988人浏览过

|

来源于php中文网

原创

Layui表格编辑需手动监听table.on("edit")事件并提交,仅更新DOM和缓存,不自动发起请求;须校验、转换值,区分全量或增量提交,并注意自定义模板需手动调用update()同步数据。

必须手动监听 table.on("edit") 事件并主动提交,layui 不会自动把编辑结果发到后端。 编辑只是改了 dom 和缓存,不触发网络请求;不写保存逻辑,数据就永远卡在前端。

监听 edit 事件拿到变更位置和新值

这个事件在用户失焦或回车时触发,但只告诉你“哪一列、哪一行、新值是什么”,不带整行原始数据,也不做防抖或校验。

  • obj.field 是列字段名(如 "price")
  • obj.value 是输入后的新值(注意:checkbox 编辑返回的是字符串 "true"/"false",不是布尔值)
  • obj.data 是当前行完整数据对象,但它是渲染时的快照,不一定反映其他列的未提交修改
  • 别直接用 obj.value 当最终值——空格、逗号、非法字符要提前 trim() 或类型转换

用 table.getData() 拿全量数据再提交

这是最常用做法,适合小数据量或单页表格。但要注意分页影响:

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

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

下载
  • 默认 table.getData() 只返回当前页数据;如果启用了分页且需全量保存,得手动遍历 table.cache["your-table-id"] 拼接
  • 提交前必须设 contentType: "application/json",否则后端(如 Express)按 application/x-www-form-urlencoded 解析,收不到 JSON body
  • 正确写法:data: JSON.stringify({ rows: table.getData() }),不能直接把数组塞进 data
  • 后端接收字段名(比如这里的 rows)必须和接口文档一致,Layui 不做 key 映射

只提交变更行,避免全量传输

数据量大时,全量提交浪费带宽、掩盖业务意图,也增加后端解析压力。更合理的做法是构造最小更新对象:

  • 在 edit 回调里记下 e.tr(DOM 行元素),用 e.tr.data("index") 拿到该行在 table.cache 中的索引
  • 查 table.cache["demo"][index] 得到原始行数据,对比 obj.value 判断是否真有变更
  • 构造类似 { id: 123, status: "done" } 的对象提交,后端按主键更新即可
  • 注意:table.cache 的 key 是表格 id 属性值,不是渲染时的容器 ID

容易被忽略的一点是:自定义模板(比如下拉框、日期选择器)里的输入不会自动同步进 table.cache,必须在 change 或 blur 时手动调用 obj.update(),否则 table.getData() 读出来的还是旧值。

热门AI工具

更多
DeepSeek

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

豆包大模型

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

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

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

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

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

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

2443

2023.08.11

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

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

5283

2023.10.09

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

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

6330

2024.03.19

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

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

5918

2024.03.22

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

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

843

2024.05.22

ajax教程
ajax教程

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

2780

2023.06.14

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

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

360

2023.08.31

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

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

2613

2023.11.15

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

0

2026.10.14

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习

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

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