100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > layui表格动态新增行

layui表格动态新增行

时间:2020-08-17 05:35:49

相关推荐

layui表格动态新增行

当点击添加一行时动态添加一行:

首先定义表格:

<%-- 表格–%>

添加一行

然后就是 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.length;v++){

Data[i].Id=Data[i-1].Id+1;//给id重新排序

}

}

continue;

}

table.reload(“tabAddSell”,{

data : Data

});

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。