layui表格列必须显式配置edit属性才能生成可编辑输入框,否则dom中仅渲染div;templet与edit不可共存,动态禁用需用$td.data('edit', false)。
必须在列配置中显式写 edit 属性,否则该列永远不可编辑——不是“没生效”,而是根本没生成输入框。
列配置里漏写 edit 是最常见原因
很多人以为绑了 table.on('cell()') 或写了 dblclick 事件就能编辑,其实完全无关。Layui 表格所有单元格默认只读,不靠 JS 拦截,而是靠渲染逻辑控制:没配 edit,DOM 里就只有 <div>,连 <code><input> 都没生成,点再多次也没用。
-
edit: 'text'→ 渲染普通文本框 -
edit: 'number'→ 带数字校验和上下箭头的输入框 -
edit: 'select'→ 只生成空<select></select>,选项得你手动塞(比如用templet返回完整 HTML) -
edit: 'date'在 2.8+ 不生效,需配合templet+laydate手动绑定
templet 和 edit 不能共存
只要列定义里写了 templet,无论内容多简单,edit 都会被忽略。因为渲染权移交给了你,Layui 不再接管编辑逻辑。
- 想在自定义模板里支持编辑?得自己写
<input>或<select></select>,并手动绑定事件、处理失焦/回车提交 - 别指望
table.on('edit()')还能触发——它只响应由 layui 自动渲染的编辑控件 - 如果只是加个图标或按钮,建议用
toolbar列或style控制,而非滥用templet
动态控制某列是否可编辑(比如根据状态)
静态配置做不到“这行可编、那行不可编”,但可以在 done 回调里用 jQuery 动态打标:
table.render({
elem: '#demo',
cols: [[
{field: 'status', title: '状态', edit: 'text'},
{field: 'amount', title: '金额', edit: 'number'}
]],
done: function(res, curr, count){
// status 为 'done' 的行,禁用 amount 列编辑
$('td[data-field="amount"]').each(function(){
var $td = $(this);
var trIndex = $td.closest('tr').data('index');
var rowData = table.cache['demo'][trIndex];
if (rowData && rowData.status === 'done') {
$td.data('edit', false);
}
});
}
});
-
$td.data('edit', false)是 layui 内部识别“禁用”的唯一方式 - 别用
contentEditable="false"或 CSSpointer-events: none,这些只拦点击,拦不住双击后自动渲染的 input - 移动端若用
event: 'click'触发编辑,记得检查<meta name="viewport">是否禁用了缩放,否则 click 会延迟 300ms 导致点击无响应
真正难的不是“怎么开编辑”,而是“怎么关得干净”——table.on('edit()') 里 return false 不会阻止 input 渲染,只会让保存逻辑失效;想源头禁用,只能靠 edit 配置或 $td.data('edit', false),其他都是障眼法。











