Spring+SpringMVC+Mybatis实现增删改查--（六）SSM删除、批量删除员工的实现

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();
	}