layui表格动态新增行

layui表格动态新增行_第1张图片
当点击添加一行时动态添加一行:layui表格动态新增行_第2张图片

首先定义表格:
<%-- 表格–%>

添加一行

然后就是 table初始化:
table.render({
elem: ‘#tabAddSell’,//table元素
id: ‘tabAddSell’,
page: false,
data:[],//这里赋初始值
cols: [[
{title: ‘序号’, width: 120,type:‘numbers’,totalRowText: ‘合计’},
{field: ‘id’, title: ‘id’, event: ‘id’, width: 120, hide: true},
{field: ‘right’, title: ‘操作’,width:80,align: ‘center’, templet: function(rowData){
return ‘移除’;}},

]],
});

//添加行
$("#addRow").on(“click”, function() {
tableActive.addNewRow();
});

//监听工具条,删除行
table.on(“tool(tabAddSell)”, function (obj) {
var data = obj.data,
event = obj.event,
tr = obj.tr; //获得当前行 tr 的DOM对象;
console.log(data);
switch(event){
case “del”:
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
tableActive.deleteRow();
break;
}}

//定义表格操作
var tableActive = {
//添加行
addNewRow: function() {
//获取表格当前数据
var newData = table.cache[“tabAddSell”];
//新行数据
var newRow= {
“Id”:Data.length,
… //给新行空数据
};
//将新行插入表格数据中
newData.push(newRow);

//使用新数据重载表格
table.reload(“tabAddSell”,{
data: newData
});
//删除行
deleteRow: function() {
discountAllMoney=0;
Data = table.cache[“tabAddSell”];
Data.splice(Data.length-1, 1);//删除最后一项空值
var boll=false;
for(var i=0, row; i < Data.length; i++){
row = Data[i];
//在table工具栏监听时删除对应行dom结构
//行不存在则从数据中删除
if(row.Id===undefined){
Data.splice(i,1);//删除一项
boll=true;
CommodityNameR.splice(i,1);
}
if (boll){
for (var v=i;v Data[i].Id=Data[i-1].Id+1;//给id重新排序
}
}
continue;
}
table.reload(“tabAddSell”,{
data : Data
});

}

你可能感兴趣的:(java,layui,java)