layui表格内使用edit属性修改行内容

在cols里,在姓名这一列上添加了“edit”参数,则表示姓名这一列下的单元格是可编辑的:

cols: [[{field: 'uName',title: '姓名',minWidth: 130, edit: 'text'}]],

触发单元格编辑事件:单元格被编辑,且值发生改变时触发,回调函数返回一个object参数。

table.on('edit(test)', function (obj) {
   console.log(obj.value); // 得到编辑修改后的值
   console.log(obj.field); // 得到编辑的字段名
   console.log(obj.data); // 得到修改后该行的数据
 }

注意:edit是固定事件名;test是table原始容器的属性lay-filter="对应的值";obj.value得到修改后的值;obj.field得到编辑的字段名;obj.data得到所在行的所有相关数据。

那么如何控制编辑的字符的长度呢?

table.on('edit(test)', function (obj) {
        if (obj.value.trim().length > 5) { //判断字段长度,长度大于5时,弹出提示,
          																//并且页面刷新, 展示未修改之前的表格数据
            layer.msg("字符长度不能超过5!", { icon: 2,time:2000},function(){
                table.reload();
            });
        } else { // 如果符合,才会将值传给后台
            let param = {
                id: obj.data.id,
                uName: obj.value.trim()
            }
            equipmentSave(param)
        }
    })

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Layui表格添加、编辑、删除和保存数据的代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui表格添加编辑删除操作和保存数据</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md12"> <table class="layui-table" lay-filter="test"> <thead> <tr> <th>ID</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>HTML</td> <td> <a href="javascript:void(0);" class="layui-btn layui-btn-xs" onclick="editRow(this)">编辑</a> <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" onclick="delRow(this)">删除</a> </td> </tr> <tr> <td>2</td> <td>CSS</td> <td> <a href="javascript:void(0);" class="layui-btn layui-btn-xs" onclick="editRow(this)">编辑</a> <a href="javascript:void(0);" class="layui-btn layui-btn-danger layui-btn-xs" onclick="delRow(this)">删除</a> </td> </tr> </tbody> </table> <div class="layui-btn-group"> <button class="layui-btn layui-btn-sm" onclick="addRow()">添加</button> <button class="layui-btn layui-btn-sm" onclick="saveData()">保存数据</button> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['table', 'layer'], function() { var table = layui.table; var layer = layui.layer; //监听单元格编辑 table.on('edit(test)', function(obj) { console.log(obj.value); //得到修改后的值 console.log(obj.field); //当前编辑的字段名 console.log(obj.data); //所在的所有相关数据 }); }); //添加 function addRow() { var table = layui.table; table.render({ elem: '#test', data: [{ id: '', name: '' }], cols: [ [{ field: 'id', title: 'ID', edit: 'text' }, { field: 'name', title: '名称', edit: 'text' }, { fixed: 'right', title: '操作', toolbar: '#barDemo' }] ] }); } //编辑 function editRow(obj) { var table = layui.table; var tr = $(obj).parents('tr'); //将单元格设为可编辑状态 tr.find('td').each(function() { var td = $(this); if (td.attr('data-editable')) { td.attr('contenteditable', true); } }); } //删除 function delRow(obj) { var tr = $(obj).parents('tr'); tr.remove(); } //保存数据 function saveData() { var table = layui.table; var data = table.cache.test; console.log(JSON.stringify(data)); layer.msg('数据已保存'); } </script> <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> </body> </html> ``` 注意事项: - 使用`layui.use()`方法加载`table`和`layer`模块。 - `table.render()`方法用于初始化表格,`elem`参数指定表格容器的选择器,`data`参数指定表格数据,`cols`参数指定表格列定义。 - 在表格列定义中,使用`edit`属性将单元格设为可编辑状态,使用`toolbar`属性指定操作列的工具栏模板。 - 在操作列的工具栏模板中,使用`lay-event`属性指定操作类型。 - 在JavaScript代码中,使用`table.on()`方法监听单元格编辑事件,使用`table.cache()`方法获取表格缓存数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值