实现代码及思路如下:
HTML代码
<div class="layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 tableWidget">
<table id="dataTableEditTable" lay-filter="dataTableEditTable"></table>
</div>
JS代码
var blankRowData = {
'dataItemNo': '', 'dataItemName': '', 'dataItemDescription': '', 'dataType': '', 'isKey': '',
'isNullable': '', 'isForeignKey': '', 'dataElement': '', 'dataDict': ''
};
var tableData = [];
if (layui.cache.identified == 'dataTableEdit') {
table.render({
elem: '#dataTableEditTable',
id: "dataTableEditTable",
cellMinWidth: 95,
toolbar: "#toolbar",
defaultToolbar: [],
height: "full-160",
text: {none: "暂无数据"},
page: false,
cols: [
[
{
type: "checkbox",
fixed: 'left',
width: 40
},
{
field: 'dataItemNo',
title: '数据项编号',
width: 150,
align: 'center'
},
{
field: 'dataItemName',
title: '数据项名称',
width: 100,
align: 'center'
},
{
field: 'dataItemDescription',
title: '数据项描述',
align: 'center'
},
{
field: 'dataType',
title: '数据类型',
width: 100,
align: 'center'
},
{
field: 'isKey',
title: '是否主键',
width: 100,
align: 'center'
},
{
field: 'isNullable',
title: '是否可为空',
width: 100,
align: 'center'
},
{
field: 'isForeignKey',
title: '是否外键',
width: 100,
align: 'center'
},
{
field: 'dataElement',
title: '数据元',
width: 100,
align: 'center'
},
{
field: 'dataDict',
title: '数据字典',
width: 100,
align: 'center'
}
]
],
data: tableData
});
}
/*增加/删除一行点击事件*/
table.on("toolbar(dataTableEditTable)", function (e) {
switch (e.event) {
case "add":
tableData.push(blankRowData);
table.reload('dataTableEditTable', {
data: tableData
});
break;
case "del":
tableData.splice(tableData.length -1 , 1);
table.reload('dataTableEditTable', {
data: tableData
});
break;
}
});
实现思路
定义一个全局变量tableData
保存表格数据,点击增加时,向tableData
增加一条空白数据blankRowData
,然后重新加载表格。