关于layui 实现点击按钮添加一行(方法渲染创建的table)

目标：layui 实现点击按钮添加一行

解决方案：

方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个<tr> 标签；

方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object;

之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在<tr>中加样式，特别是table中有很多种控件时，样式的添加非常麻烦 ，可参见点击打开链接

后选择使用方案2 ，但是遇到了，添加的对象无法通过加载url来渲染t

原来的数据表格使用方法渲染的方法传的值，其数据是从url中取出，

发现layui的url传值方式，数据格式必须为：

{\"code\":0,\"msg\":\"\",\"count\":4,\"data\":[{\"colName\":\"ID\",\"colNo\":0,\"collator\":\"\",\"comments\":\"\",\"dbId\":1,\"defVal\":\"\",\"deleted\":\"\",\"dispersion\":0,\"domainId\":0,\"histogram\":\"\",\"isHide\":\"\",\"isSerial\":\"F\",\"isVirtual\":\"\",\"maxVal\":\"\",\"minVal\":\"\",\"notNull\":\"T\",\"repetRate\":0,\"scale\":-1,\"serialId\":0,\"tableId\":1048586,\"timestampT\":\" \",\"typeName\":\"INTEGER\",\"varying\":\"F\",\"vcolNo\":0,\"vertNo\":0}]}

而我在reload方法中存放的data数据格式为

[{\"colName\":\"ID1\",\"colNo\":0,\"collator\":\"\",\"comments\":\"\",\"dbId\":1,\"defVal\":\"\",\"deleted\":\"\",\"dispersion\":0,\"domainId\":0,\"histogram\":\"\",\"isHide\":\"\",\"isSerial\":\"F\",\"isVirtual\":\"\",\"maxVal\":\"\",\"minVal\":\"\",\"notNull\":\"T\",\"repetRate\":0,\"scale\":-1,\"serialId\":0,\"tableId\":1048586,\"timestampT\":\" \",\"typeName\":\"INTEGER\",\"varying\":\"F\",\"vcolNo\":0,\"vertNo\":0}]

因此，解决方案：

1、将新增的data格式修改为url返回的格式，失败；

2、将url的返回值，以data的array格式返回，并作为变量传给data;成功。

全部方法如下：

首先：用ajax请求将数据取出存于变量，将变量赋值给table的data

 var tableData=new Array(); // 用于存放表格数据
$.ajax({
   url: \"${ctp}/TableOperate/GetColsInfo?tabId=1048586&dbId=1\"
   ,type:\"get\"
   ,async:false
   ,dataType:\"json\"
   , success: function(result){
    tableData=result;
   console.log(result);
   }
  });
table.render({
   elem: \'#baseInfo\'
   ,data:tableData
   ,cols: [[
   {title : \'序号\',type:\'numbers\',Width: 20}
   /* ,{field:\'tableId\' , title:\'tableId\' }
    ,{field:\'dbId\'  , title:\'dbId\' } */
    ,{field:\'colNo\' , title:\'colNo\' , sort: true}
    ,{field:\'domainId\' , title:\'domainId\', minWidth: 120, templet: \'#switchTpl\', unresize: true }
    ,{field:\'colName\' , title:\'colName\' , minWidth: 120, sort: true   , edit: \'text\'}
    ,{field:\'typeName\' , title:\'typeName\', minWidth: 120, sort: true ,templet: \'#selectTpl\'}
    ,{field:\'scale\' , title:\'scale\' , minWidth: 80, edit: \'text\'}
    ,{field:\'notNull\' , title:\'notNull\' , minWidth: 100, templet: \'#switchNullTpl\', unresize: true}
    ]]
   ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
   layout: [\'limit\', \'count\', \'prev\', \'page\', \'next\', \'skip\'] //自定义分页布局
   ,curr: 1 //设定初始在第 1 页
   ,groups: 1 //只显示 1 个连续页码
   ,first: false //不显示首页
   ,last: false //不显示尾页
   }
   , done: function(res, curr, count){
    }
 
  });

最后，调用按钮的点击方法

//点击加号按钮时，新添一行
  $(\"#addTable\").click(function(){
   var oldData = table.cache[\"baseInfo\"];
   var data1={\"colName\":\"ID2\",\"colNo\":0,\"collator\":\"\",\"comments\":\"\",\"dbId\":1,\"defVal\":\"\",\"deleted\":\"\",\"dispersion\":0,\"domainId\":0,\"histogram\":\"\",\"isHide\":\"\",\"isSerial\":\"F\",\"isVirtual\":\"\",\"maxVal\":\"\",\"minVal\":\"\",\"notNull\":\"T\",\"repetRate\":0,\"scale\":-1,\"serialId\":0,\"tableId\":1048586,\"timestampT\":\" \",\"typeName\":\"INTEGER\",\"varying\":\"F\",\"vcolNo\":0,\"vertNo\":0};
   oldData.push(data1);
   table.reload(\'baseInfo\',{
    data : oldData
   });
  });

效果如图所示：

以上这篇关于layui 实现点击按钮添加一行(方法渲染创建的table)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。