layui Table设置可编辑控制

因layui表格可编辑的单元格需要单独控制,所以找资料及自己琢磨了一下,现功能已实现,具体代码如下:

需要在table.render中添加done事件,需要注意的是,如果默认没有指定某个单元格,则会将整行的单元格都设置为可编辑。

 , done: function (res, curr, count) {
                    let tableView = this.elem.next();
                    layui.each(res.data, function (i, item) {
                        if (item.CustomerType === '门店') {
                            //tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', true); //设置下标为9的单元格为可编辑
                            tableView.find('tr[data-index=' + i + ']').find('td').data('edit', true);
                        }
                    })
                }

注意:单独控制时无需设置属性 edit: ‘text’ ,如果设置的话,则需要在if后添加else判断

   if (item.CustomerType === '门店') {
                            //tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', true); //设置下标为9的单元格为可编辑
                            tableView.find('tr[data-index=' + i + ']').find('td').data('edit', true);
                        }else {
                           // tableView.find('tr[data-index=' + i + ']').find('td').eq(9).data('edit', false);
                           tableView.find('tr[data-index=' + i + ']').find('td').data('edit', false);
                        }

单元格编辑后监听事件代码如下:

            table.on('edit(tb)', function (obj) {
                var value = obj.value;//修改后的数据
                var field = obj.field;//修改的字段名
                var data = obj.data;//修改的当行数据
                if (value.length > 50) { //判断字段长度
                    layer.msg("字符长度不能超过50!", { icon: 2 });
                    return false;
                }
                //获取修改行的ID值
                var Id= data.Id;
                $.post("/Data/Record/EditCustomerName", { Id: Id, CustomerName: value }, function (data) {
                    if (data.suc) {
                        layer.msg("修改成功!", { icon: 1 });
                    } else {
                        layer.msg("修改失败!", { icon: 2 });
                    }
                });
            });

也可弹出后台返回的消息数据。

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
layui中,可以使用table模块中的editEvent方法实现table编辑功能。具体步骤如下: 1. 引入layui和jquery库 ```html <!-- 引入layui样式 --> <link rel="stylesheet" href="/layui/css/layui.css"> <!-- 引入jquery库 --> <script src="/jquery/jquery-3.6.0.min.js"></script> <!-- 引入layui库 --> <script src="/layui/layui.all.js"></script> ``` 2. 编写HTML代码 ```html <table id="demo" lay-filter="test"></table> ``` 3. 编写JavaScript代码 ```javascript // 定义表格列 var tableCols = [[ {type: 'checkbox', fixed: 'left'}, {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', edit: 'text'}, {field: 'username', title: '用户名', width: 120, edit: 'text'}, {field: 'email', title: '邮箱', width: 200, edit: 'text'}, {field: 'sex', title: '性别', width: 80, edit: 'text'}, {field: 'city', title: '城市', width: 120, edit: 'text'}, {field: 'sign', title: '签名', width: 200, edit: 'text'}, {field: 'experience', title: '经验值', width: 100, sort: true, edit: 'text'}, {field: 'score', title: '积分', width: 100, sort: true, edit: 'text'}, {field: 'classify', title: '职业', width: 100, edit: 'text'}, {field: 'wealth', title: '财富', width: 150, sort: true, edit: 'text'}, {fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo'} ]]; // 定义表格数据 var tableData = [ {id: '10001', username: '张三', email: '[email protected]', sex: '男', city: '北京', sign: '我是张三', experience: 100, score: 80, classify: '程序员', wealth: 10000}, {id: '10002', username: '李四', email: '[email protected]', sex: '男', city: '上海', sign: '我是李四', experience: 80, score: 90, classify: '设计师', wealth: 20000}, {id: '10003', username: '王五', email: '[email protected]', sex: '女', city: '广州', sign: '我是王五', experience: 120, score: 100, classify: '作家', wealth: 30000}, {id: '10004', username: '赵六', email: '[email protected]', sex: '女', city: '深圳', sign: '我是赵六', experience: 80, score: 60, classify: '程序员', wealth: 5000}, {id: '10005', username: '钱七', email: '[email protected]', sex: '男', city: '杭州', sign: '我是钱七', experience: 200, score: 80, classify: '程序员', wealth: 40000} ]; // 渲染表格 layui.use(['table', 'form'], function() { var table = layui.table; var form = layui.form; // 监听表格编辑事件 table.on('edit(test)', function(obj){ var value = obj.value; // 得到修改后的值 var field = obj.field; // 得到修改的字段名 var data = obj.data; // 得到修改的数据对象 // TODO: 将修改的数据提交到后台保存 }); // 渲染表格 table.render({ elem: '#demo', cols: tableCols, data: tableData, toolbar: '#toolbarDemo', page: true, limit: 10, limits: [10, 20, 30, 40, 50] }); }); ``` 在上面的代码中,tableCols定义了表格的列,其中使用了edit属性指定可编辑的字段。tableData定义了表格的数据。在表格渲染之后,通过table.on('edit', ...)方法监听表格的编辑事件,可以在事件处理函数中实现将修改的数据提交到后台保存的逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值