layui动态表格,动态修改表格内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="../../../res/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all"> <!-- 注:如果您直接将所有代码复制到本地,上述css需要将路径改为本地路径 --> </head> <body> <table class="layui-table" lay-data="{url: '../../demo/table/demo1/-page=1&limit=10.js', id:'test3', escape: true}" lay-filter="test3"> <thead> <tr> <th lay-data="{type:'checkbox'}">ID</th> <th lay-data="{field:'id', width:80, sort: true}">ID</th> <th lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th> <th lay-data="{field:'email', edit: 'text', minWidth: 150}">邮箱</th> <th lay-data="{field:'sex', width:80, edit: 'text'}">性别</th> <th lay-data="{field:'city', edit: 'text', minWidth: 100}">城市</th> <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th> </tr> </thead> </table> <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script> <!-- 注:如果您直接将所有代码复制到本地,请注意以上内容 JS 需要将路径改为本地路径 --> <script> layui.use(['table', 'util'], function(){ var table = layui.table ,util = layui.util; ///监控单元格编辑 table.on('edit(test3)', function(obj){ console.log(obj.data.id); alert(obj.value); alert(obj.field); console.log(obj.value); ///修改后的值 console.log(obj.field); ////目前编辑的字段名 console.log(obj.data); ///行所有相关数据 console.log(obj.data.Name); ///字段值 var data = obj.data; var CommodityDetailID = data.CommodityDetailID; var value = obj.value; //ajax请求修改 var data = obj.data; $.ajax({ url: "{:url('Customer/doedit')}", type: 'POST', dataType: 'JSON', data: {'id':data.id,'NewName':obj.value}, success: function (result) { if(result.code == 0){ layer.msg(result.msg); }else{ layer.msg(result.msg); } }, }); layer.msg('[ID: ' data.id '] ' field ' 字段变更值为: util.escape(value)); }); }); </script> </body> </html>