必须在列配置中设置edit字段才能启用单元格编辑功能,edit: 'text'、'number'、'select'分别对应文本框、数字输入和下拉框,若列使用templet则edit失效;编辑完成通过table.on('edit(filter)')回调获取新旧值,数据仅存于table.cache中,需手动同步至服务端。

必须在列配置里加 edit 字段,否则点击单元格不会进入编辑态——这是最常被忽略的前提,不是绑事件就能改。
列配置里怎么写 edit 才生效
只有带 edit 的列才会渲染可编辑的 input,其他列哪怕加了 click 事件也进不了编辑流程。
-
edit: 'text':普通文本输入框 -
edit: 'number':带数字校验和上下箭头(注意:2.8+ 仍不原生支持type="number",实际仍是 text 类型,需手动干预) -
edit: 'select':只生成空<select></select>标签,选项得自己塞 - 如果该列用了
templet,edit会直接失效——渲染权交给你了,layui 不再接管
table.on('edit(filter)') 是唯一可靠的数据出口
编辑完成(失焦、回车、点其他单元格)后触发,不是 cellClick 或 rowDouble。
- 回调参数
obj包含field、value、oldValue和整行数据obj.data - 原始传入的
data数组完全不变,最新值只存在table.cache['your-filter-id']中 - 服务端分页场景下,必须在这个回调里主动发请求保存,layui 不自动同步
- 别指望
form.on('submit')能捕获表格内编辑,它们是两套机制
移动端单击编辑要注意 viewport 和 event 配置
双击在 iOS Safari 或部分安卓 WebView 里容易被识别为缩放或选中文本,导致进不去编辑态。
- 加
event: 'click'到列配置中,例如:{ field: 'price', title: '价格', edit: 'number', event: 'click' } - 确保页面有正确的
<meta name="viewport">,否则 click 可能延迟 300ms - 如果需区分 PC 和移动端行为,用
layui.device()判断后动态设置列配置 - 编辑完没清空 input 的 focus 状态,或没处理回车/失焦时的校验,用户会误以为改成功了
真正难的不是加一行 edit: 'text',而是每次编辑都要准确定位缓存位置、识别字段归属、同步视图状态——尤其当表格启用了分页、搜索、固定列或自定义 toolbar 后,data-field 和真实列索引很容易对不上。











