LayUI表格批量删除实现方法
作者:拾光时间:2026-10-22 17:03:15浏览:586
本文介绍如何在LayUI中实现表格数据的批量删除功能。核心步骤包括监听复选框事件以收集选中行的索引,并通过遍历这些索引从DOM中移除对应的表格行。文中提供了完整的JavaScript代码示例,帮助开发者快速掌握该功能的实现细节。
监听复选框事件
首先,需要监听表格复选框的变化事件。通过绑定 checkbox(demo) 监听器,可以捕获用户勾选或取消勾选的操作。当用户全选时,通常无需处理,直接返回即可。对于单个行的勾选操作,如果状态为选中(obj.checked 为 true),则将该行的索引(obj.data.LAY_TABLE_INDEX)添加到数组 checkedArr 中;如果状态为取消选中,则从数组中删除对应的索引。这一步确保了 checkedArr 始终保存当前被选中的行索引列表。
执行删除操作
var checkedArr=[];
table.on('checkbox(demo)', function(obj){
if (obj.type=='all')
return;
if (obj.checked){
checkedArr.push(obj.data.LAY_TABLE_INDEX);
//checkedArr[obj.data.id] = obj.data.LAY_TABLE_INDEX
}
else{
delete checkedArr[obj.data.LAY_TABLE_INDEX];
//delete checkedArr[obj.data.id];
}
});
var checkStatus = table.checkStatus('orderTest'),
data = checkStatus.data;
if (checkStatus.isAll){
for (var i=0; i<data.length ; i++){
checkedArr.push[i];
//checkedArr[data[i].id]=i;
}
}
for (var j=0; j<checkedArr.length ; j++){
// $(".layui-table-view .layui-table tbody tr[data-index="+checkedArr[j]+"]").remove();
}
$.each(checkedArr, function(k){
$(".layui-table-view .layui-table tbody tr[data-index="+checkedArr[k]+"]").remove();
});
最后,执行删除操作。利用 table.checkStatus 获取当前表格的选中状态,遍历 checkedArr 数组中的每一个索引。通过 jQuery 选择器定位到 LayUI 表格 tbody 中 data-index 属性等于该索引的 tr 元素,并调用 remove() 方法将其从页面中移除。这样即可实现前端界面的批量删除效果。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
