zoukankan      html  css  js  c++  java
  • 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  
              });  
         });  
  • 相关阅读:
    如何编写Robot Framework测试用例1---(基本格式篇)
    如何编写Robot Framework测试用例2---(测试用例语法1)
    使用RobotFramework的DataBaseLibrary(Java实现)
    Python fabric远程自动部署简介
    Python之路【第二十三篇】:Django 初探--Django的开发服务器及创建数据库(笔记)
    Python之路【第二十二篇】:Django之Model操作
    Python之路【第二十一篇】:Django之Form组件
    第十一篇:web之Django之Form组件
    第十篇:web之前端之django一些feature
    第九篇:web之前端之web上传文件的方式
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9045532.html
Copyright © 2011-2022 走看看