必须配置 edit 字段才能启用 Layui 表格单元格编辑,edit 与 templet 不可共存;推荐 event: 'click' 替代 dblclick 以兼容移动端;编辑后数据仅存于 table.cache 中,需通过 table.on('edit') 获取变更,不可依赖原始 data 数组。
必须配置 edit 字段,否则绑定 click 事件无效
layui 表格单元格默认是只读的,哪怕你给 td 绑了 click 或 dblclick,也改不了内容——因为底层没渲染输入控件。真正触发编辑行为的,是列配置里的 edit 属性。
常见可选值:edit: 'text'(普通文本)、edit: 'number'(带数字校验)、edit: 'date'(不生效,需配合 templet + laydate)。
注意:edit 和 templet 不能共存。一旦用了自定义模板,Layui 就放弃接管编辑逻辑,edit 会被忽略。
event: 'click' 比双击更可靠,尤其在移动端
默认编辑靠双击,但在 iOS Safari、部分安卓 WebView 中,双击常被识别为缩放或文字选择,根本进不去编辑态。Layui 2.7+ 支持直接配 event: 'click',单击即可激活输入框。
用法示例:
{ field: 'name', title: '姓名', edit: 'text', event: 'click' }
如果需要 PC 和移动端行为区分,可用 layui.device() 判断后动态设置列配置;真机测试时还要确认 <meta name="viewport"> 没禁用缩放,否则 click 可能延迟 300ms。
编辑后数据不在原始 data 数组里,得查 table.cache
编辑只是更新 DOM 和临时缓存,原始传入的 data 数组不会变。想拿到最新值,必须访问 table.cache['your-filter'],它的 key 是你在 table.render() 里设的 id 或元素的 lay-id。
修改方式安全且推荐:
- 直接赋值:
table.cache['user'][rowIndex].username = '新名字' - 别去改原始
data数组,否则翻页、重载后就丢了 - 服务端分页场景下,编辑完要主动发请求保存,Layui 不自动同步
监听编辑完成要用 table.on('edit(filter)'),不是 cellClick
编辑结束(回车、失焦、点击其他单元格)会触发 table.on('edit(your-filter)', callback),回调参数 obj 包含 field、value、oldValue 和整行数据 obj.data。
错误做法:
- 监听
cellClick后手动focus input:找不到预埋的 input,因为表格初始渲染的是纯文本 - 监听
rowDouble再替换 DOM:绕远路,且移动端完全不触发 - 以为
edit: 'select'能直接弹下拉:它只生成空<select></select>,选项得自己塞,且table.on('edit')对它不生效
真正需要下拉选择的列,得用 templet 渲染可点击容器,再动态插入 select 并调 form.render('select'),编辑后还得手动更新 table.cache 并调 table.updateRow() 同步视图。











