layui表格编辑

layui是不错的跨屏响应式前端框架，不仅提供了丰富的ui样式，对于数据的渲染逻辑也有清晰脱俗的机制，切图网对于layui的了解也是逐步递进，从ui再到数据处理，下面是layui数据表格添加的逻辑，主要是先获取表格数据，然后对数据进行追加，然后重新渲染表格的方法，以下代码亲测有效，而修改该行和删除该行的方法比较简单，数据表格默认提供了该方法。

layui目前已经关停了官网，原因可能是非法的灰色网站采用了layui导致了受牵连，附来自民间的官网镜像 https://layuion.com/

//添加机构var demo1;$(‘#addgov‘).click(function(){layer.closeAll();layer.open({type: 1,title :‘所在机构/单位名称‘,shade :false,//offset:‘rb‘,//offset:[0, 0],skin: ‘layui-layer-rim‘, //加上边框area: [‘550px‘, ‘auto‘], //宽高content: $(‘#addgovdialog‘),success: function (layero) {$(‘#govfield_sx‘).val(‘‘);//$(‘#govfield_jgmc‘).val(‘‘);$(‘#govfield_jglx‘).val(‘‘);$(‘#govfield_drzw‘).val(‘‘);form.render(‘ｓｅｌｅｃｔ‘, ‘govform‘);$(‘:focus‘).blur();// 添加form标识layero.addClass(‘layui-form‘);// 将保存按钮改变成提交按钮layero.find(‘.layui-layer-btn0‘).attr({‘lay-filter‘: ‘formedit‘,‘lay-submit‘: ‘‘});//form.render();},btn:[‘确定‘],yes:function(){form.on(‘submit(formedit)‘, function (data) {//获取表单的值console.log(data);//获取机构/单位名称 的值var dwmc = demo1.getValue();var dwmc_name = dwmc[0].name;var dwmc_value = dwmc[0].value;console.log(dwmc[0]);//console.log(data.field);//获取旧数据，并且追加一条数据 ，重新加载表格var oldData = table.cache["testReload2"];var i = oldData.length+1;//console.log(oldData.length);var data1 = {aa: data.field.sx, bb: dwmc[0].name, bb2: dwmc[0].value, cc: data.field.jglx, dd: data.field.drzw};//添加oldData.push(data1);//console.log(oldData)//刷新table.reload(‘testReload2‘, {url: ‘‘,data: oldData});layer.closeAll();//layer.msg(‘提交‘);});},btn2:function(){},});return false;})

修改和删除提供了方法，所以比较简单

//监听工具条table.on(‘tool(demo)‘, function(obj){var data = obj.data;if(obj.event === ‘detail‘){layer.msg(‘ID：‘+ data.id + ‘ 的查看操作‘);} else if(obj.event === ‘del‘){layer.confirm(‘真的删除行么‘, function(index){obj.del();layer.close(index);//console.log(data);//添加投资机构和参评信息中的现所在机构的数据要联动szjg_linkage(data);});} else if(obj.event === ‘edit‘){//layer.alert(‘编辑行：‘+ JSON.stringify(data))console.log(obj); //获取表格值layer.closeAll();layer.open({type: 1,title :‘所在机构/单位名称‘,shade :false,//offset:‘rb‘,//offset:[0, 0],skin: ‘layui-layer-rim‘, //加上边框area: [‘550px‘, ‘400px‘], //宽高content: $(‘#addgovdialog‘),success: function (layero) {//ajax示例// $.ajax({// type: "post",// url: "dwmc.json",// dataType: "json",// //data: formData ,// //processData : false,// //必须false才会自动加上正确的Content-Type// contentType : false ,//// success: function(data) {//// },// error: function(data){////// }// })demo1 = xmSelect.render({el: ‘#demo1‘,clickClose: true,filterable: true,radio: true,create: function(val, arr){if(arr.length === 0){return {name: ‘创建‘+val,value: val}}},initValue: [data.bb2], //设置默认选中data: [//{name: ‘张三‘, value: 1,selected:true},{name: ‘机构名称1‘, value: 1},{name: ‘机构名称2‘, value: 2},],on: function(data){console.log(data);if(data.isAdd){//数据变化 赋值 ，联动if(data.change.length>0){$(‘#govfield_jglx‘).val(‘111‘);$(‘#govfield_drzw‘).val(‘aaaa‘);form.render();}}},filterable: true, //远程搜索})$(‘#govfield_sx‘).val(data.aa);//$(‘#govfield_jgmc‘).val(data.bb);$(‘#govfield_jglx‘).val(data.cc);$(‘#govfield_drzw‘).val(data.dd);form.render(‘ｓｅｌｅｃｔ‘, ‘govform‘);$(‘:focus‘).blur();// 添加form标识layero.addClass(‘layui-form‘);// 将保存按钮改变成提交按钮layero.find(‘.layui-layer-btn0‘).attr({‘lay-filter‘: ‘formedit‘,‘lay-submit‘: ‘‘});//form.render();},btn:[‘确定‘],yes:function(){form.on(‘submit(formedit)‘, function (data) {//获取表单的值console.log(data);//获取机构/单位名称 的值var dwmc = demo1.getValue();var dwmc_name = dwmc[0].name;var dwmc_value = dwmc[0].value;console.log(dwmc[0]);//console.log(data.field);//修改该行数据obj.ｕｐｄａｔｅ({aa: data.field.sx, bb: dwmc[0].name, bb2: dwmc[0].value, cc: data.field.jglx, dd: data.field.drzw});// //刷新// table.reload(‘testReload2‘, {// url: ‘‘,// data: oldData// });//layer.closeAll();//layer.msg(‘提交‘);});},btn2:function(){},});return false;}});