layui 实现点击按钮添加一行（方法渲染创建...目标：layui实现点击按钮添加一行解决方案：方案1、table是用

目标：layui 实现点击按钮添加一行
解决方案：
方案1、table 是用转换静态表格的方式创建的，写一个button，每次点击按钮，就添加一个<tr> 标签；
方案2、table 是用方法渲染的方式创建的，写一个button,每次点击按钮，加载数据时添加一个Object;

之前我试过用方案1 来实现该功能，发现这个方案，代码量极大，最困难的地方就是在<tr>中加样式，特别是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
});
});

效果如图所示：

更多学习资料可关注：annalin1203