Layui数据表格如何设置指定的单元格为不可编辑状态

轻宇小哥_1340

轻宇小哥_1340

2026-04-29

568人浏览

原创

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:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
.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,否则分页或导出时拿不到最新值。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2443

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5283

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6330

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5918

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

843

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2095

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3122

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1056

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3559

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习