资讯详情

layui动态修改表格内容

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&amp;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>

标签: lt固态继电器s216zklt固态继电器s312zklt固态继电器s303zl

锐单商城拥有海量元器件数据手册IC替代型号,打造 电子元器件IC百科大全!

锐单商城 - 一站式电子元器件采购平台