基于SSM框架的批量删除的前台+后台实现

最新推荐文章于 2021-02-07 10:36:49 发布

原创最新推荐文章于 2021-02-07 10:36:49 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#批量删除

前端同时被 3 个专栏收录

6 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

SSM

2 篇文章

订阅专栏

本文介绍了一个使用HTML、JavaScript及后端技术实现的员工信息管理功能，重点在于批量删除操作的实现过程。从前端界面设计到后端逻辑处理，详细展示了如何通过复选框选择多个员工记录，并通过Ajax技术向后端发送请求进行批量删除。

前台页面：

前台代码：

<table width="100%" border="1" cellpadding="5" cellspacing="0" style="border:#c2c6cc 1px solid; border-collapse:collapse;">
    <tr class="main_trbg_tit" align="center">
        <td><input type="checkbox" name="checkAll" id="checkAll"></td>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <c:forEach items="${requestScope.employees}" var="employee" varStatus="stat">
        <tr id="data_${stat.index}" class="main_trbg" align="center">
            <td> <input type="checkbox" id="box_${stat.index}" value="${employee.id}"> </td>
	    <td> ${employee.name } </td>
	    <td>
                <c:choose>
                    <c:when test="${employee.sex == 1 }">男</c:when>
		    <c:otherwise>女</c:otherwise>
                </c:choose> </td>
        </tr>
    </c:forEach>
</table>

JS代码：

<script type="text/javascript">
	       $(function(){
	    	   /** 获取所有的单选框 */
	    	   var boxs  = $("input[type='checkbox'][id^='box_']");
	    	   
	    	   /** 给全选按钮绑定点击事件  */
		    	$("#checkAll").click(function(){
		    		// 所有数据行的选中状态与全选的状态一致
		    		boxs.attr("checked",this.checked);
		    	})
		  	
	    	   /** 删除员工绑定点击事件 */
	    	   $("#delete").click(function(){
	    		   /** 获取到用户选中的复选框  */
	    		   var checkedBoxs = boxs.filter(":checked");
	    		   if(checkedBoxs.length < 1){
	    			   $.ligerDialog.error("请选择至少一个需要删除的员工！");
	    		   }else{
	    			   /** 得到用户选中的所有的需要删除的ids */
	    			   var ids = checkedBoxs.map(function(){
	    				   return this.value;
	    			   })
	    			   
	    			   $.ligerDialog.confirm("确认要删除吗?","删除员工",function(r){
	    				   if(r){
	    					   // 发送请求
	    					   window.location = "${pageContext.request.contextPath}/employee/removeEmployee.do?ids=" + ids.get();
	    				   }
	    			   });
	    		   }
	    	   })
	       })
</script>

后台代码：

	@RequestMapping("/removeEmployee.do")
	public String removeEmployee(Integer[] ids, Model model){
		
		int rows = employeeService.removeEmployee(ids);
		if(rows > 0){
			return "redirect:/employee/findEmployee.do";
		} else {
			model.addAttribute("failMSG", "删除员工失败！");
			return "/jsp/fail.jsp";
		}
	}

这里可以用Integer[]类型将接收，也可以用string接收。

Dao层实现（sql）：

	<delete id="deleteEmployee">
		delete from employee_inf where id in
		<foreach collection="ids" item="id" open="(" close=")" separator=",">
			#{id}
		</foreach>
	</delete>