layui移除(删除)table表格的一行
表格里添加删除按钮:
, {field: 'wealth', width: 150, title: '操作', align: 'center', fixed: 'right',templet: function (item) {return '<a style="margin:0px 5px; color:red; cursor: pointer;" lay-event="delete" id="DeleteTr" >删除</a>';}}
添加 “delete”事件:
//监听行工具事件table.on('tool(' + TableObj.tableId + ')', function (obj) {var data = obj.data; //添加删除行if (obj.event === 'delete') {//alert('delete');layer.confirm('真的删除行么', function (index) { var cacheData = layui.table.cache[TableObj.tableId];//获取缓存obj.del();//①移除这一行var rowIndex = obj.tr.attr("data-index"); //获取行索引cacheData.splice(rowIndex, 1); //②彻底移除元素,从缓存里移除这一行layer.close(index);//关闭弹窗});}});
图例:
说明:
layui的table,光用 obj.del(); 去移除一行虽然看上去这一行没了。
但是table的缓存还存在这被移除的行数据,还需要移除它的缓存内容,如下:
var cacheData = layui.table.cache[TableObj.tableId];//获取talbe的缓存
obj.del();//删除行
var rowIndex = obj.tr.attr("data-index"); //获取行索引
cacheData.splice(rowIndex, 1); //从缓存里删除行数据