修改layui表格一整行为不可编辑状态

最新推荐文章于 2024-10-25 13:59:18 发布

原创最新推荐文章于 2024-10-25 13:59:18 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用layui库实现表格中单元格的可编辑状态，点击确定后切换为只读模式，便于数据管理与交互设计。

layui 单元格可编辑，当点击确定的时候，整行变成不可编辑状态。

var $this = $(this),
tr = $this.parents('tr'),
trIndex = tr.data('index');
$(".layui-table").find('tr[data-index="'+trIndex+'"]').find('td').data('edit', false)

先找到这个表格，再通过索引找到这个表格的这一行，再找到这一行的所有单元格。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿聊

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

实现控制layui表格某些特定条件的行不让选择的功能

zongmaomx的博客

03-20

1622

在表格渲染完的done回调中，监听全选复选框和每行复选框，实现全选时所有可选行勾选，可选行全部勾选时全选复选框自动勾选，不是全选时全选复选框自动取消勾选。title定义一个name为check_all，lay-filter为checkall的复选框，内容定义#checkbd模板，但是layui并没有自带这样的功能，设置表头属性type后无法针对某一行进行判断。注意lay-filter不能用含下划线的字符串，虽然官网说的是任意字符。

layui表格编辑单元格时直接点击保存按钮问题

小安然的博客

11-12

1331

layui表格编辑单元格时直接点击保存按钮问题问题：最近做个数据表格，里面用到编辑单元格的工单，然后碰到个问题，表格用的是layui的表格。表格有自带的编辑单元格的方法。我需要对编辑完的数据进行校验，layui提供了监听单元格编辑的方法。但是这个方法只有在单元格编辑完成之后才触发，也就是说当你在编辑单元格的时候输入数据后直接回车会触发单元格编辑完成的事件，或者当你编辑完让此单元格失去焦点后触发，但这有个前提条件就是单元格里输入有效值才会触发。我做的是当单元格失去焦点后触发事件，然后对输入

1 条评论您还未登录，请先登录后发表或查看评论

layui表格禁止单元格修改

qq_39173779的博客

05-13

1824

$data.forEach(function (item, index) { if (item.DataType != 2) { $(".layui-table").find('tr[data-index="' + index + '"]').find('td[data-field="Name"]').data('edit', false); $(".layui-table").find('tr[data-index=.

动态修改layui表格为不可编辑状态

Mr丶GUO

06-18

4072

动态修改layui表格为不可编辑状态单个不可编辑此处dataIndex为表格的下标，可以使用事件进行获取例如使用下拉列表： layform.on('select(demo)', function (res) { let value = res.value; let elem = res.othis.parents('tr'); let dataIndex = elem.attr("data-index"); $(".layui-table

layui表格编辑功能,根据数据设置某些行或单元格不可编辑

最新发布

weixin_58507189的博客

10-25

627

{ field: '字段', title: '表头', edit: 'text', }当然也可以设置某一个单元格不可编辑,在done内写。根据数据设置某一行不可编辑,在done内写。

layui表格动态添加|layui表格可编辑

08-24

layui表格动态添加|layui表格可编辑动态添加

layui表格可搜索过滤可分页

03-25

layui表格是一款基于layui框架的前端组件，用于展示数据并提供搜索、过滤和分页功能。layui是中国流行的前端UI框架，以其简洁、优雅的代码风格和强大的功能受到开发者的喜爱。在“layui表格可搜索过滤可分页”这个...

Layui数据表格之单元格编辑方式

10-16

总结来说，Layui数据表格提供了灵活的单元格编辑方式，通过几个简单的配置和编程步骤，就可以在网页上实现一个功能强大的表格编辑器。需要注意的是，虽然本文是基于VS编辑器和其他开发工具进行介绍，但其核心概念和...

解决layui表格的表头不滚动的问题

10-16

在网页开发中，Layui 是一款非常流行的前端框架，它提供了丰富的组件，包括表格（Table）等。然而，在实际应用中，用户可能会遇到表格在数据过多时表头不滚动的问题，这使得用户在浏览长表格时无法清晰地看到表头...

Layui表格行添加编辑删除操作和保存数据代码.zip

09-27

本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例，演示了如何在Layui表格中实现动态的行添加、编辑和删除功能，并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...

layui点击按钮添加可编辑的一行方法

12-11

昨天已经成功添加了一行，今天希望所添加的一行可以进行单元格编辑。然而，发现添加了edit:’text’以后也不可以进行单元格编辑，而原本已有的数据可以，因此通过浏览器调试看了原有数据的样式，如图所示：因此，将点击按钮添加一行<tr>标签的方法，修改为如下： $("#addTable").click(function(){ var tr=" <tr>"+ " <td data-field='domainId' data-edit='text'> <div class='layui-table-cell laytable-cell-1-domainId '>11 </div></td

禁止 Layui 表格单元格修改的实现方法

理论都是虚的，代码才是王道。

11-21

1017

这样，我们就实现了禁止 Layui 表格单元格修改的功能。在 Layui 中，我们可以通过一些简单的步骤来禁止表格单元格的修改。接下来，我们在页面中创建一个表格。这里我们使用一个简单的例子，包含两列数据。在这个例子中，我们将使用 Layui 的。首先，我们需要在 HTML 文件中引入 Layui 的相关库文件。当事件触发时，我们可以阻止默认行为，从而禁止单元格的修改。要禁止单元格的修改，我们可以使用 Layui 的。，则表示单元格不可编辑，我们通过返回。，则表示单元格可编辑，我们通过返回。

layui可编辑表格根据条件禁用

letgooo0的博客

06-06

2226

layui中表格插入select和checked，根据条件控制禁用与否

layui禁止编辑

PAN17610011759的博客

12-21

5617

禁止用户编辑在标签的class属性上添加 layui-disabled就没办法编辑啦 class="layui-disabled"

LayUi禁用表格编辑

热门推荐

疙瘩陈

03-14

1万+

保存表格数据的时候会查询数据库。。。如果不让保存的时候就要将单元格们的可编辑状态变更一下，这个属性难找 // 表格单元格禁用编辑 $(layero).find('td').data('edit', false) ...

Layui之设置某一行的操作列的按钮不可点击

qq_39835505的博客

12-01

3247

参考网址 https://blog.csdn.net/qq_35077107/article/details/104717589 table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event, //获得 lay-event 对应的值 tr =

layui表格禁止edit修改

sc0002的博客

08-15

7785

done: function(res, curr, count){ var tableView = this.elem.next(); // 当前表格渲染之后的视图 // for(var i in res.data){ //遍历整个表格数据 // 遍历数组不建议用in layui.each(res.data, function(i, item){ if(item.student...

layui.render控制某一列是否可以编辑（layui的tablerender的edit属性控制打开关闭）

weixin_44980354的博客

06-15

1469

需要注意的是，这段代码假设了表格中的每行都有一个 data-index 属性，用于标识该行在数据源中的索引。另外，该代码只能控制某一列的数据是否可以编辑，如果需要控制多列，需要将 .eq(1) 修改为其他列的索引。这段代码使用了 layui.each 函数对 res.data 数组进行遍历，对于每个数组元素，如果其 status 属性为 1，则将该行第二列的单元格元素的 data-edit 属性设置为 true，否则将其设置为 false。

禁止layui表格单元格修改技术

理论都是虚的，代码才是王道。

11-13

726

在Web开发中，我们经常需要使用表格来展示数据。layui是一个流行的前端UI框架，它提供了丰富的组件和功能，包括表格。然而，有时候我们可能需要禁止用户修改表格的单元格内容，这时我们可以使用layui的。以上就是禁止layui表格单元格修改的基本步骤。通过这种方式，我们可以有效地保护用户的输入数据不被误改。首先，我们需要在HTML文件中引入layui的CSS和JS文件。接下来，我们在body标签内创建一个表格。然后，我们使用layui的。最后，我们使用layui的。模块来禁止单元格修改。

layui表格可编辑

12-17

根据引用[1]，Layui表格提供了可编辑的功能。你可以通过以下步骤实现： 1. 引入Layui和Layui表格的相关文件。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 在HTML中创建一个表格，并为其添加一个id。 ```html <table id="demo" lay-filter="test"></table> ``` 3. 在JavaScript中配置表格，并开启编辑功能。 ```javascript layui.use('table', function(){ var table = layui.table; // 表格配置 table.render({ elem: '#demo', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', width:150}, {field:'sex', title:'性别', width:80, sort:true}, {field:'city', title:'城市', width:100}, {field:'sign', title:'签名', width:200}, {field:'experience', title:'积分', width:80, sort:true}, {field:'score', title:'评分', width:80, sort:true}, {field:'classify', title:'职业', width:100}, {field:'wealth', title:'财富', width:135, sort:true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]], page: true, // 开启编辑功能 edit: true }); }); ``` 4. 在HTML中添加一个工具条，并为其添加一个id。 ```html <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 5. 在JavaScript中监听表格的编辑事件，并处理编辑后的数据。 ```javascript layui.use('table', function(){ var table = layui.table; // 监听表格编辑事件 table.on('edit(test)', function(obj){ var value = obj.value; // 得到修改后的值 var data = obj.data; // 得到所在行所有键值 var field = obj.field; // 得到字段 // 处理编辑后的数据 // ... }); }); ```

修改layui表格一整行 为不可编辑状态

修改layui表格一整行为不可编辑状态