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

Posted 2020-11-05 Carina

/ jquery实现的搜索功能
    $(‘#search_btn‘).on(‘click‘,function(){
        var txt=$(‘#inputValue‘).val();
        var value=$(‘.layui-colla-content‘);
        if($.trim(txt)!=""){
            $(".layui-colla-content").css(‘display‘,‘none‘).filter(":contains(‘"+txt+"‘)").show().css("color","red");
        }else{
            alert(‘111‘);
        }
    })

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){  
               }  
  
       });  
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){  
               }  
  
       });  
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){  
               }  
  
       });  
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  
          });  
     });