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() 拿全量数据再提交
这是最常用做法,适合小数据量或单页表格。但要注意分页影响:
- 默认
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() 读出来的还是旧值。


















