layui table 修改为双击编辑

最新推荐文章于 2025-03-29 16:23:32 发布
最新推荐文章于 2025-03-29 16:23:32 发布
阅读量6.6k 收藏 5
点赞数 3
分类专栏： layui 文章标签： 双击修改 layui table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/new_zp/article/details/90206125
版权

点开layui目录，编辑table.js文件，搜索i.data("edit")；

a.layBody.on("click","td",function(e){var i=t(this),a=(i.data("field"),i.data("edit"))

可以看到这段代码，把click修改为dblclick便可实现双击修改

 

如果引起什么连带效果可以留言一下^-^

LayUI表格在线编辑动态修改列数据
梦凝哲雪
07-03 3971
LayUI表格在线编辑动态修改列数据 灵活运用 JS对象中 [] 对变量的解析
基于layui实现的可编辑、可回车进入下一行的表格
猫晨的技术小屋
08-04 652
基于layui实现的可编辑、可回车进入下一行的表格
Layui数据表格之单元格编辑方式
01-19
开发工具与关键技术：VS、layui数据表格之单元格编辑 layui是我们常用的一个插件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，其中有很多模快，而每个模板又包括很多模板，下面我要讲解的是数据表格中的单元格编辑。 1、在使用layui之前首先确保已经引入了layui的css和js脚本文件。 2、初始化layui模块。 layui.use(['table'], function () { //声明一个layuiTable变量作为全局变量。 layuiTable = layui.table;
Layui table 修改为双击编辑
FsMoDi的博客
10-24 1830
Layui table 修改为双击编辑
Layui实现table动态添加行，可删除、表格可编辑，小数校验
最新发布
qq_35683545的博客
03-29 608
实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中会传过来一个总的重量weight，E列是根据D列填写的百分比自动相乘计算的，其中行都是动态变化的，工具栏有个新增按钮，点击新增按钮，就会增加一行，点击行的删除按钮，就会删除直接上代码。
layui+ssm实现数据表格双击编辑更新数据
m0_46590717的博客
12-04 1271
在使用layui加载后端数据请求时，对数据选项框进行双击即可实现数据的输入编辑更改。这里只要使用layui和后端ssm框架实现，所以后端代码。controller代码。
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
今天小编就为大家分享一篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui table表格数据的新增,修改,删除,查询,双击获取行数据
热门推荐
Museions的开心博客
08-23 1万+
layui table利用参数对表格数据新增,编辑修改,删除,查询,模块功能扩展-双击数据行获取本行数据等。模块化使用layui table表格，通过二次封装实现语法...
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列...
Layui弹框中数据表格中可双击选择一条数据的实现
10-15
主要介绍了Layui弹框中数据表格中可双击选择一条数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
layui table双击行事件
c1357949619的博客
02-21 1702
layui 表格双击事件
layui点击按钮添加可编辑的一行方法
10-18
今天小编就为大家分享一篇layui点击按钮添加可编辑的一行方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui table单元格事件修改值的方法
10-16
今天小编就为大家分享一篇layui table单元格事件修改值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui编辑表格单元格
m0_67879025的博客
06-19 6517
layui.table中的单元格编辑
LayUI动态开启单元格可以编辑状态
梦凝哲雪
07-03 3177
解决layui-table单元格编辑只能text问题,layui-table单元格编辑时间控件、自定义表单控件
Jquery实现双击表单元格可编辑
weixin_30849591的博客
05-26 184
<script type="text/javascript"> function doTableTdEditClick(param){ doTdEditable(param); } function doTdEditable(param){ var input ="<input type='text' id='temp' value='"+$(...
layui单元格可编辑、layui单元格插入select、
qq_41944038的博客
10-08 7585
记录下最近工作中遇到一些容易忘记的知识点 想要layui的表格可编辑，只需要在col中加入edit即可： tableIns = table.render({ elem: '#buildInputTable', data: arr, page: false, limit: Number.MAX_VALUE, height: 300, id: 'buildInputT
LayUI使用之单元格编辑状态切换
wcyonghuming的博客
04-14 1585
第一次接触前端框架Lay UI，想做一个动态切换单元格的编辑状态，如果是手动修改，只要将表格cols中的edit赋值为true即可 动态则需要获取edit句柄，修改后重新渲染表格即可，不知道为何不能实时修改生效，需要调用渲染函数后才生效 ```javascript var layer = layui.layer //弹层 ,table = layui.table //表格 ,dropdown = layui.dropdown //下拉菜单 ,$=layu
layui单元格校验单元格属下
01-03
### Layui 表格单元格校验及属性设置方法 在Layui框架下实现表格单元格的数据验证和自定义属性配置是一项常见需求。对于表格中的每一个字段，可以设定特定的规则来确保输入的有效性和一致性。 #### 数据校验机制 为了对表格内的数据执行有效性检查，在`edit`事件监听器内部调用表单验证函数是一个有效的方式[^1]。通过编写JavaScript逻辑，可以在用户完成编辑并尝试提交更改之前触发这些检验条件： ```javascript table.on('edit(demo)', function(obj){ var value = obj.value //得到修改后的值 ,data = obj.data //得到所在行所有键值 ,field = obj.field; //当前编辑的字段名称 // 对应字段的具体验证逻辑 if(field === 'exampleField'){ if(!/^\d+$/.test(value)){ layer.msg('请输入有效的整数'); return; } } }); ``` 此代码片段展示了当编辑名为`demo`的表格时如何针对特定列(`exampleField`)实施简单的正则表达式匹配以确认其仅包含数字字符。 #### 自定义单元格样式与行为 除了基本的内容验证外，还可以利用Layui提供的API接口来自由调整各单元格的表现形式及其交互特性。例如，要使某个单元格变为只读状态或应用特殊的CSS类名，可以通过如下方式操作： ```html <table id="LAY_table_user" lay-filter="user"> <thead> <tr> <!-- 更多头部 --> <th lay-data="{field:'username', edit:'text'}">用户名</th> <th lay-data="{field:'status', templet:'#switchTpl', unresize:true, width:80}">状态</th> ... </tr> </thead> </table> <script type="text/html" id="switchTpl"> {{# if(d.status == 'ok'){ }} <span class="layui-btn layui-btn-normal layui-btn-xs">正常</span> {{# } else { }} <span class="layui-btn layui-btn-disabled layui-btn-xs">禁用</span> {{# } }} </script> ``` 上述HTML结构说明了怎样借助模板引擎（如Thymeleaf）动态渲染不同状态下显示的文字颜色变化效果；同时设置了部分列不允许拖拽改变宽度(`unresize:true`)以及指定了固定宽度(`width:80`)[^2]。 另外值得注意的是，如果希望某些特殊情况下阻止默认的行为（比如双击进入编辑模式），也可以通过绑定额外的时间处理器来进行干预处理。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值