99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)使用layui怎么實現(xiàn)一個點擊按鈕添加一行功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

業(yè)務(wù)包括：企業(yè)網(wǎng)站建設(shè)、手機網(wǎng)站開發(fā)、商城網(wǎng)站建設(shè)、網(wǎng)站營銷推廣等服務(wù)，并且涵蓋域名申請、虛擬空間、云服務(wù)器、等互聯(lián)網(wǎng)基礎(chǔ)服務(wù)；創(chuàng)新互聯(lián)聯(lián)建站以互聯(lián)網(wǎng)的創(chuàng)新理念，成熟完善的建站體系，開拓進取的精神，專業(yè)的解決方案和顧問咨詢服務(wù)，幫助客戶在互聯(lián)網(wǎng)時代提升形象、把握商機、實現(xiàn)價值，提高企業(yè)的核心競爭力。

解決方案：

方案1、table 是用轉(zhuǎn)換靜態(tài)表格的方式創(chuàng)建的，寫一個button，每次點擊按鈕，就添加一個 標(biāo)簽；

方案2、table 是用方法渲染的方式創(chuàng)建的，寫一個button,每次點擊按鈕，加載數(shù)據(jù)時添加一個Object;

之前我試過用方案1 來實現(xiàn)該功能，發(fā)現(xiàn)這個方案，代碼量極大，最困難的地方就是在中加樣式，特別是table中有很多種控件時，樣式的添加非常麻煩 ，可參見點擊打開鏈接

后選擇使用方案2 ，但是遇到了，添加的對象無法通過加載url來渲染t

原來的數(shù)據(jù)表格使用方法渲染的方法傳的值，其數(shù)據(jù)是從url中取出，

發(fā)現(xiàn)layui的url傳值方式，數(shù)據(jù)格式必須為：

{"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數(shù)據(jù)格式為

[{"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請求將數(shù)據(jù)取出存于變量，將變量賦值給table的data

 var tableData=new Array(); // 用于存放表格數(shù)據(jù)
$.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 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔
   layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
   ,curr: 1 //設(shè)定初始在第 1 頁
   ,groups: 1 //只顯示 1 個連續(xù)頁碼
   ,first: false //不顯示首頁
   ,last: false //不顯示尾頁
   }
   , done: function(res, curr, count){
    }
 
  });

最后，調(diào)用按鈕的點擊方法

//點擊加號按鈕時，新添一行
  $("#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怎么實現(xiàn)一個點擊按鈕添加一行功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：使用layui怎么實現(xiàn)一個點擊按鈕添加一行功能
分享地址：http://www.ef60e0e.cn/article/gehgeo.html