目標：layui 實現點擊按鈕添加一行

解決方案：

方案1、table 是用轉換靜態表格的方式創建的，寫一個button，每次點擊按鈕，就添加一個

標簽；

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

之前我試過用方案1 來實現該功能，發現這個方案，代碼量極大，最困難的地方就是在

中加樣式，特別是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

});

});

效果如圖所示：

以上這篇關于layui 實現點擊按鈕添加一行(方法渲染創建的table)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的kayui进行添加_关于layui 实现点击按钮添加一行(方法渲染创建的table)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。