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

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(“删除失败！！”);
}