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

Posted Carina

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui实现点击按钮添加行(方法渲染创建的table)相关的知识,希望对你有一定的参考价值。

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

 

以上是关于layui实现点击按钮添加行(方法渲染创建的table)的主要内容,如果未能解决你的问题,请参考以下文章

layui框架实现多图片手动上传和随表单提交方法

layui如何左侧点击,右侧显示内容?

VUE项目实战45编写添加参数和添加属性的功能

easyui页面数据显示的问题

layui 表格如何调用update

[Layui]layui多个tab加载数据并在标题显示每个tab的数据条数