讲师中心 微信公众号
AI工具推荐 视频效率加速

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

轻宇小哥_1340

轻宇小哥_1340

发布时间:2026-04-29 10:13:29

|

568人浏览过

|

来源于php中文网

原创

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

热门AI工具

更多
Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

相关专题

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

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

2463

2023.08.11

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

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

5303

2023.10.09

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

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

6350

2024.03.19

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

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

5938

2024.03.22

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

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

843

2024.05.22

json数据格式
json数据格式

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

2095

2023.08.07

json是什么
json是什么

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

3142

2023.08.23

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

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

1056

2023.10.13

Linux 新手先学哪些命令
Linux 新手先学哪些命令

Linux新手命令专题汇集终端基础、文件目录操作、文本查看、软件安装和权限管理等入门文章,帮助按实际任务练习常用命令并建立命令行操作习惯。

0

2026.10.15

热门下载

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

精品课程

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

共87课时 | 12.9万人学习

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

共89课时 | 11.1万人学习

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

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn