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


解决方案:
方案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
          });
     });
效果如图所示: 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值