核心思想:当点击批量删除会触发一个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>