Spring+SpringMVC+Mybatis实现增删改查--(六)SSM删除、批量删除员工的实现
单个删除:
批量删除
删除逻辑
1.单个删除URI:/emp/{id} DELETE
(1)给删除按钮绑定上员工的ID号
(2)单个删除按钮的点击事件
(3)员工删除的方法
2.全选复选框搭建
(1)复选框的搭建
(2)选中全选复选框子复选框也同时被选中
(3)当子复选框全部被选中时,全选复选框此时也被选中
3.批量删除的逻辑
(1)发出ajax请求
(2)员工删除、批量删除的方法
删除逻辑的具体实现
1.单个删除URI:/emp/{id} DELETE
(1)给删除按钮绑定上员工的ID号
//为删除按钮添加一个自定义的属性,来表示当前员工的id
delBtn.attr("delete-id",item.empId);
var btnTd=$("<td></td>").append(editBtn).append(" ").append(delBtn);
(2)单个删除按钮的点击事件
//单个删除按钮的点击事件
$(document).on("click",".delete_btn",function(){
//1.弹出确认删除对话框
//alert($(this).parents("tr").find("td:eq(1)").text());
var empName=$(this).parents("tr").find("td:eq(1)").text();
var empId=$(this).attr("delete-id");
if(confirm("确认删除【"+empName+"】吗?")) {
//点击true,发送ajax请求
$.ajax({
url:"${APP_PATH}/emp/"+empId,
type:"DELETE",
success:function(result){
alert(result.msg);
//回到本页
to_page(currentPage);
}
})
}
});
(3)员工删除的方法
/**
* 员工删除
* @param id
*/
public void deleteEmp(Integer id) {
employeeMapper.deleteByPrimaryKey(id);
}
2.全选复选框搭建
(1)复选框的搭建
(2)选中全选复选框子复选框也同时被选中
//完成全选/全不全功能
$("#check_all").click(function() {
//attr获取checked是undefined
//这些dom原生的属性,推荐用prop来获取;attr获取自定义属性的值
//$(this).prop("checked"); 全选框的选中状态
$(".check_item").prop("checked",$(this).prop("checked"));
});
(3)当子复选框全部被选中时,全选复选框此时也被选中
//check_item
$(document).on("click",".check_item",function(){
//判断当前选中的元素是否为
var flag=$(".check_item:checked").length==$(".check_item").length;
$("#check_all").prop("checked",flag);
});
3.批量删除的逻辑
(1)发出ajax请求
//点击全部删除,批量删除
$("#emp_delete_all_btn").click(function () {
//$(".check_item:checked")
//遍历item
var empNames="";
var del_idstr="";
$.each($(".check_item:checked"),function(){
//组装名字字符串
empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
//组装员工id字符串
del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-"
});
//去除empNames多余的逗号
empNames=empNames.substring(0,empNames.length-1);
//去除del_idstr多余的-
del_idstr=del_idstr.substring(0,del_idstr.length-1);
if (confirm("确认删除【"+empNames+"】吗?")) {
//发送ajax请求删除员工
$.ajax({
url:"${APP_PATH}/emp/"+del_idstr,
type:"DELETE",
success:function(result){
alert(result.msg);
//回到当前页面
to_page(currentPage);
}
});
}
});
(2)员工删除、批量删除的方法
/**
* 单个跟批量二合一删除方法
* 批量删除:1-2-3
* 单个删除:1
* @param id
* @return
*/
@ResponseBody
@RequestMapping(value="/emp/{ids}",method=RequestMethod.DELETE)
public Msg deleteEmp(@PathVariable("ids")String ids) {
//批量删除
if(ids.contains("-")) {
List<Integer> del_ids=new ArrayList<Integer>();
String[] str_ids = ids.split("-");
//组装id的集合
for(String id:str_ids) {
del_ids.add(Integer.parseInt(id));
}
employeeService.deleteBatch(del_ids);
}else {
//单个删除
Integer id=Integer.parseInt(ids);
employeeService.deleteEmp(id);
}
return Msg.success();
}