js+ssm框架实现批量删除

核心思想：当点击批量删除会触发一个js事件，通过js获取指定复选框选中集合的值，再发送url请求进行后台删除操作。

• 以实际项目中批量删除幼儿信息为例：

---

                                                            一、前端 

步骤

• 复选框：

<input type="checkbox" name="childrenId" value="${children.childrenId}">

• 绑定按钮 :

<button onclick="deleteChildren()">批量删除</button>

• js操作 :

<script type="text/javascript">	
	/* 批量删除幼儿 */
	//首先定义一个字符串用来拼接存储复选框值 
	var childrenId = '';
	function deleteChildren() {
		//获取指定复选框集
	 	var list = document.getElementsByName("childrenId");
		//循环遍历每一个复选框
	 	for ( var i = 0; i < list.length; i++) {
	 		 //如果某个复选框被选中
			 if (list[i].checked) {
				 //将该复选框的value值拼接到字符串childrenId后 
				childrenId = childrenId+list[i].value+",";			
			} 
	 	} 
		//如果最后childrenId的值为空串，说明界面一个复选框都未选中
	 	if(childrenId==''){
	 		//则提示信息
	 		alert("请选择要删除的数据!");
	 	}
	 	else{
	 		//如果有选中的则触发请求进行删除
			window.location.href = "deleteManyChildren.mvc?childrenId="+childrenId;
	 	} 
	}
	
</script>

---

                                                             二、后端 

• controller

        /*
	 * 批量删除幼儿信息
	 */
	@RequestMapping("deleteManyChildren")
	public String deleteManyChildren(Integer[] childrenId){
	
		int i = childrenService.deleteManyChildren(childrenId);
		//如果删除成功
		if(i > 0){
			//重定向到幼儿管理主界面
			return "redirect:childrenManagerUI.mvc";
		}
		//删除异常
		return "404";
	}

•  service接口

public int deleteManyChildren(Integer[] childrenId);

• service实现 

        /*
	 * 批量删除
	 */
	public int deleteManyChildren(Integer[] childrenId) {
		
		return childrenMapper.deleteManyChildren(childrenId);
	}

•  mapper接口

    //批量删除
    int deleteManyChildren(Integer[] childrenId);

• mapper实现 

  <!-- 批量删除 -->
  <delete id="deleteManyChildren" parameterType="List">
  	delete from children
  	<where>
  		<foreach collection="array" item="childrenId" open="and children_id in (" close=")" separator=",">
	   		#{childrenId}
		</foreach>
  	</where>
  </delete>