SSM:十一、CRUD的删除员工功能
SSM:十一、CRUD的删除员工功能
思路:1、单一删除:①在服务端发送/emp/{id}请求,发送的请求的类型为DELETE,将id的参数类型为依据路径来查找。
②发送ajax请求,对数据进行删除。
2、批量删除:①在服务端发送/emp/{ids}请求,发送请求类型一样为DELETE。在后端进行具体操作对ids的分割和转化为集合对象。
②在前端页面加入多选radio,以便选择演删除员工的信息。
③用jQuery对复选框的全选以及全不选按钮进行相应的操作。
④利用ajax发送请求,进行对数据的删除。
单一删除
服务后端的control层的service层的操作
controller层
@ResponseBody
@RequestMapping(value = "/emp/{id}",method = RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("id") Integer id) {
employeeService.deleteEmp(id);
return Msg.success();
}
}
EmpService层
/**
* 删除员工,根据主键id来删除
* @param id
*/
public void deleteEmp(Integer id) {
employeeMapper.deleteByPrimaryKey(id);
}
在前端进行发送ajax请求
//删除员工
//给删除的按钮的样式添加点击监听
$(document).on('click','.delete_btn',function () {
//找到empName值,找到tr的第二个td的值,即empName的值。
var empname = $(this).parents('tr').find('td:eq(2)').text();
//alert(empname)
//获取定义的属性值,从之中取出
var empId = $(this).attr('del-id');
//弹框是否删除
if(confirm("确认删除 ["+empname+"] 吗?")) {
//如果确认删除,就用ajax发送请求交给服务器来处理
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"DELETE",
success:function (result) {
alert(result.message);
//转向本页
to_Page(current_page);
}
})
}
});
批量删除
在后端对数据的的解析和发送请求
EmpService层
/**
* 批量删除
* @param ids
*/
public void deleteBatch(List<Integer> ids) {
//创造删除条件
EmployeeExample example = new EmployeeExample();
EmployeeExample.Criteria criteria = example.createCriteria();
//SQL语句:delete emp where emp_id in (ids)
criteria.andEmpIdIn(ids);
employeeMapper.deleteByExample(example);
}
controller层
/**
* 单一删除和批量删除二合一
* 删除员工
*/
@ResponseBody
@RequestMapping(value = "/emp/{ids}",method = RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("ids") String ids) {
//如果包含 - 符号,就是批量删除,否则就为单一删除
if(ids.contains("-")) {
List<Integer> list_ids = new ArrayList<>();
//将ids分割,把ids去掉
String[] strings= ids.split("-");
//遍历分割后的ids,组装id,将组装后的id转化为Integer格式,添加进List集合
for (String str : strings) {
list_ids.add(Integer.parseInt(str));
}
//把list集合的id传入批量删除的条件中
employeeService.deleteBatch(list_ids);
return Msg.success();
}else {
//将字符串转化为Integer类型
Integer id = Integer.parseInt(ids);
employeeService.deleteEmp(id);
return Msg.success();
}
}
前端页面的全选及全不选的jQuery操作
//给全选的复选框添加点击监听,全选/全不选
$('#check_all').click(function () {
//先得到总复选的状态,将该状态传递给各个子复选框
$(this).prop('checked');
//将得到的状态传给子复选框
$('.check_item').prop('checked',$(this).prop('checked'));
})
//给各个子复选框添加点击监听
$(document).on('click','.check_item',function () {
//alert($('.check_item:checked').length);
//如果当期那点击的子复选框的个数等于子复选框的全部个数,全选复选框就选中
if($('.check_item:checked').length == $(".check_item").length) {
$('#check_all').prop('checked','checked');
}
});
发送的ajax请求的具体操作:
//批量删除
$('#del_emp').click(function () {
//取出员工的Name和id
var empName= "";
var empId = "";
//alert($('.check_item:checked').parents('tr').find('td:eq(2)').text());
//将员工的Name和Id进行拼接
$.each($('.check_item:checked'),function () {
//员工的Name
empName += $(this).parents('tr').find('td:eq(2)').text()+",";
//员工的ID
empId += $(this).parents('tr').find('td:eq(1)').text()+"-";
})
//拼接员工名字和id,去掉最后一个,号
empName = empName.substring(0,empName.length-1);
empId = empId.substring(0,empId.length-1);
console.log(empId)
if(confirm("确认删除["+empName+"]吗")){
//如果确认删除,发送ajax请求
$.ajax({
url:'${APP_PATH}/emp/'+ empId,
type:'DELETE',
success:function (result) {
alert("删除成功!");
//删除成功后转向本页
to_Page(current_page);
}
})
}
})