layui table 列编辑监听处理

var number = /^[0-9]*$/;
//注:edit是固定事件名,modelInfo是table原始容器的属性 lay-filter="对应的值"
table.on('edit(modelInfo)', function(obj){ 
    if ('test' !==obj.field ){
        if (!number.test(obj.value)){
            layer.msg("只能输入数字", {icon: 2});
            var old=$(this).prev().text();//旧值
            $(this).val(old);
        }
    }else {
        if (obj.value.length>50){
            var old=$(this).prev().text();//旧值
            $(this).val(old);
            layer.msg("备注长度不大于50个字符", {icon: 2});
        }
    }
});
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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: 'zhangsan@123.com', sex: '男', city: '北京', sign: '我是张三', experience: 100, score: 80, classify: '程序员', wealth: 10000}, {id: '10002', username: '李四', email: 'lisi@123.com', sex: '男', city: '上海', sign: '我是李四', experience: 80, score: 90, classify: '设计师', wealth: 20000}, {id: '10003', username: '王五', email: 'wangwu@123.com', sex: '女', city: '广州', sign: '我是王五', experience: 120, score: 100, classify: '作家', wealth: 30000}, {id: '10004', username: '赵六', email: 'zhaoliu@123.com', sex: '女', city: '深圳', sign: '我是赵六', experience: 80, score: 60, classify: '程序员', wealth: 5000}, {id: '10005', username: '钱七', email: 'qianqi@123.com', 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', ...)方法监听表格的编辑事件,可以在事件处理函数中实现将修改的数据提交到后台保存的逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值