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