layui实现单个删除和批量删除

最新推荐文章于 2023-10-25 09:27:56 发布

原创最新推荐文章于 2023-10-25 09:27:56 发布 · 6.2k 阅读

CC 4.0 BY-SA版权

本文详细介绍使用layui框架实现表格数据的单个删除与批量删除功能。通过js绑定操作工具栏，实现删除确认对话框，调用后台controller方法完成数据删除，并刷新表格。批量删除通过获取选中项ID，发送POST请求，实现多条数据的同时删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui实现单个删除和批量删除

先获得表格数据
在这里插入图片描述
一、单个删除

1、在js文件中绑定操作工具栏的删除操作
//列表操作
table.on(‘tool(employeeList)’, function(obj){
var layEvent = obj.event,
data = obj.data;
if(layEvent === ‘edit’){ //编辑
addEmployee(data);
}else if(layEvent === ‘look’){
employeeInfo(data);
}else if(layEvent === ‘del’){ //删除
layer.confirm(‘确定删除此数据？’,{icon:3, title:‘提示信息’},function(index){
$.post(’/employee-info/del/’+obj.data.id,function(data){
tableIns.reload();
layer.msg(data.msg);
layer.close(index);
});
});
}
});
在这里插入图片描述
2、controller方法：

@PostMapping("/del/{id}")
public ResponseData del(@PathVariable(“id”) Integer id){

    System.out.println("删除"+id);
    boolean flg = employeeInfoService.removeById(id);
    System.out.println("删除"+flg);
    if(flg){
        return ResponseData.okMsg("删除成功！！");
    }
    return ResponseData.failMsg("删除失败！！");
}

二、批量删除
1、首先在页面上定义批量删除按钮
在这里插入图片描述

批量删除

      2、在js文件中绑定按钮点击事件

在这里插入图片描述

//批量删除
$(".delAll_btn").click(function(){
var checkStatus = table.checkStatus(‘employeeListTable’),
data = checkStatus.data,
employeesId = “”;
if(data.length > 0) {
for (var i in data) {
employeesId+=data[i].id+",";
}
console.log(employeesId);
layer.confirm(‘确定删除选中的数据？’, {icon: 3, title: ‘提示信息’}, function (index) {
$.post(’/employee-info/delAll/’+employeesId,function(data){
tableIns.reload();
layer.msg(data.msg);
layer.close(index);
});
})
}else{
layer.msg(“请选择需要删除的数据”);
}
})

3、controller方法

在这里插入图片描述
@PostMapping("/delAll/{employeesId}")
public ResponseData delAll(@PathVariable(“employeesId”) String employeesId){
List delList = new ArrayList();
String[] strs = employeesId.split(",");
for (String str : strs) {
delList.add(str);
}
boolean flg = employeeInfoService.removeByIds(delList);
if(flg){
return ResponseData.okMsg(“删除成功！！”);
}
return ResponseData.failMsg(“删除失败！！”);
}