• 目标：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
  
  
• 
  
            });
  
  
• 
  
       });
  
  
  

效果如图所示：

奈斯