Layui中禁用列编辑需在edit事件中return false;done回调可批量设td.data('edit',false);event:'click'配合CSS提升体验;templet列需手动控制input渲染并绑定更新逻辑。
edit 事件中判断行/列数据并 return false
layui 原生不提供 disabled 或 editable: false 这类列级配置,但 edit 事件是唯一可靠入口。只要在回调里根据 obj.data、obj.field 或 obj.index 判断条件成立,直接 return false 就能中断编辑流程——它会阻止 input 渲染、焦点进入和后续所有编辑逻辑。
常见错误是只改 DOM(比如设 contentEditable="false")却不拦截事件,结果双击后仍弹出输入框;或者漏掉 return false,导致编辑态闪现后才失效。
示例:禁用所有 status === 'done' 的行的 score 列编辑
table.on('edit(test)', function(obj){
if (obj.data.status === 'done' && obj.field === 'score') {
return false; // 关键:必须 return false
}
});
done 回调中批量设置 td.data('edit', false)
适用于初始化时就确定不可编辑的场景,比如服务端返回的数据里带了 isLocked: true 字段。在 done 回调里遍历 res.data,用 jQuery 找到对应 tr[data-index] 下的 td[data-field],然后调用 .data('edit', false)。
注意:.data('edit', false) 只影响后续双击行为,对已激活的编辑态无效;且该操作必须在表格渲染完成(即 done 触发后)执行,提前写会找不到 DOM 节点。
要点:
-
data-index是 layui 内部索引,不是原始数组下标,别用i直接拼 - 必须用
lay-id定位表格,如div[lay-id="test"],避免多表冲突 - 修改后无需重 render,但若之后动态 show/hide 行,需重新 patch
event: 'click' 配合 CSS pointer-events 控制点击反馈
移动端或高交互场景下,仅靠 return false 会让用户误以为“点不动”,建议叠加视觉反馈。给目标单元格加 class(如 no-edit),再配 CSS:
.no-edit {
pointer-events: none;
opacity: 0.7;
}
同时列配置启用 event: 'click'(而非默认双击),让禁用逻辑响应更及时:
{ field: 'amount', title: '金额', edit: 'number', event: 'click' }
这样用户单击不可编辑单元格时,既不会触发编辑,也不会有光标闪烁或聚焦边框,体验更干净。
templet 列里禁用编辑要手动接管
如果某列用了 templet(比如显示「操作」按钮或状态标签),那即使写了 edit: 'text' 也无效——layui 不会往自定义模板里塞 input。此时想实现“部分行可点编辑”,得自己在 templet 里判断并插入可编辑区域:
templet: function(d){
if (d.status !== 'archived') {
return '<input type="text" value="' + d.name + '">';
}
return d.name; // 纯文本,无 input
}
这种写法绕过了 edit 机制,也就不再走 edit 事件,所以禁用逻辑要写在模板生成阶段,而不是事件监听里。
容易忽略的是:手写 input 后,必须自己绑定 blur/change 事件来更新 table.cache,否则分页或导出时拿不到最新值。











