今天来实现一个批量删除的功能:
批量删除的功能呢,首先前台页面可以想到使用checkbox来做,这里后台数据库其实有两种删除的方式,如下:
但是不管数据库以哪种形式的sql删除,想要批量删除,那么前台传到后台的id肯定是多个哟!!!
1、下面就正式开如吧,下面是前台代码片段,迭代的时候取得它的索引号:这个索引是从0开始的,如果想要1,那么就+1就好啦—-${st.index+1}(如下图:)
当然啦,上面图片的情况是你是需要手动+1的,你也可以使用另一种方法,不需要+1,它和${st.index+1}效果是一样的呢,如下图:
2、接下来呢,页面需要的效果,点击全选按钮,则全选,再点击一次则取消全选;当所有子选择按钮都选中,则全选按钮选中,哪怕有一个子选择按钮没有选中,全选按钮就不会选中:
js代码如下:
<script type="text/javascript">
$(function(){
/**为全选绑定点击事件*/
$("#checkAll").click(function(){
/**获取其下面的所有checkbox
* 注意这里的input[id^='box_']表示
获取input标签,它的id都是以box_开头的,的这一系列的节点
这里的^表示的就是开头的意思.
这里的attr("checked",this.checked)还需要解释一下,特别是
this.checked,这里的this表示的是全选的那个checkbox(#checkAll)的dom元素,
也就是拿到这个全选的checkAll的checkbox的checked属性给它就好了
*/
$("input[id^='box_']").attr("checked",this.checked);
});
/**还需要为每一个子checkbox绑定事件呢
,当下面的子checkbox全部都选中的时候,上面的全选按扭
也应该要全部选中
*/
$("input[id^='box_']").click(function(){//点击每一个子checkbox,都会触发这个事件
/**获取到下面所有checkbox*/
var boxs = $("input[id^='box_']");
/*
* 下面是为checkAll设置它是否checked属性
boxs.length表示的是所有子checkbox的个数
boxs.filter(":checked").length表示是过滤出所有
子checkbox当中已经被点击选中的checkbox的个数,如果个数相等,
那么就会返回true,如果不相等,就返回false
*/
$("#checkAll").attr("checked",boxs.length == boxs.filter(":checked").length);
});
});
</script>
3、前台值传到后台去呢:
好了,前台拿到所选择的input,有可能有多个,然后送到后台去啦,这里有两种写法:
实现方法一:
1、看到那个
/**为删除按钮绑定事件*/
$("#btn").click(function(){
/**获取下面选中的checkbox*/
var checkedbox = $("input[id^='box_']:checked");
if(checkedbox.length == 0){
alert("请选择要删除的部门!!!");
}else{
if(confirm("你确定要删除吗???")){
var ids = new Array();
checkedbox.each(function(){
ids.push(this.value);
});
alert(ids);
}
}
});
——当然上面的拿值方式只是其中一种呢,上面的拿值方法也可以使用下面的map方法来实现呢……
****实现方法二:****
/**为删除按钮绑定事件*/
$("#btn").click(function(){
/**获取下面选中的checkbox*/
var checkedbox = $("input[id^='box_']:checked");
if(checkedbox.length == 0){
alert("请选择要删除的部门!!!");
}else{
if(confirm("你确定要删除吗???")){
/**
如下面,如果调用map方法,
会把函数里面的返回值作为jquery对象--res返回
注意,这里的res.toArray()等同于res.toArray().join(",");
它默认就是这样做的呢,这个需要记住嘛
*/
var res = checkedbox.map(function(){
return this.value;
});
alert(res);
alert(res.toArray());
alert(res.toArray().join(","));
}
}
});
4、然后通过以下方法把ids传到后台去呢!
window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(",");
在这里配上前台完整jsp页面:
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<title>部门管理</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${path}/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="${path}/css/style.css" />
<link rel="stylesheet" type="text/css" href="${path}/css/pager.css" />
<script type="text/javascript" src="${path}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
</style>
<script type="text/javascript">
$(function(){
/**为全选绑定点击事件*/
$("#checkAll").click(function(){
/**获取其下面的所有checkbox
* 注意这里的input[id^='box_']表示
获取input标签,它的id都是以box_开头的,的这一系列的节点
这里的^表示的就是开头的意思.
这里的attr("checked",this.checked)还需要解释一下,特别是
this.checked,这里的this表示的是全选的那个checkbox(#checkAll)的dom元素,
也就是拿到这个全选的checkAll的checkbox的checked属性给它就好了
*/
$("input[id^='box_']").attr("checked",this.checked);
});
/**还需要为每一个子checkbox绑定事件呢
,当下面的子checkbox全部都选中的时候,上面的全选按扭
也应该要全部选中
*/
$("input[id^='box_']").click(function(){//点击每一个子checkbox,都会触发这个事件
/**获取到下面所有checkbox*/
var boxs = $("input[id^='box_']");
/*
* 下面是为checkAll设置它是否checked属性
boxs.length表示的是所有子checkbox的个数
boxs.filter(":checked").length表示是过滤出所有
子checkbox当中已经被点击选中的checkbox的个数,如果个数相等,
那么就会返回true,如果不相等,就返回false
*/
$("#checkAll").attr("checked",boxs.length == boxs.filter(":checked").length);
});
/**为删除按钮绑定事件*/
$("#btn").click(function(){
/**获取下面选中的checkbox*/
var checkedbox = $("input[id^='box_']:checked");
if(checkedbox.length == 0){
alert("请选择要删除的部门!!!");
}else{
if(confirm("你确定要删除吗???")){
/**
如下面,如果调用map方法,
会把函数里面的返回值作为jquery对象--res返回
注意,这里的res.toArray()等同于res.toArray().join(",");
它默认就是这样做的呢,这个需要记住嘛
*/
var res = checkedbox.map(function(){
return this.value;
});
window.location.href="${path}/identity/deleteDept.action?ids="+res.toArray().join(",");
}
}
});
});
</script>
</head>
<body>
<form class="form-inline definewidth m20"
action="#" method="post">
<a class="btn btn-primary" href="${path }/identity/showAddDept.action">添加部门</a>
<input class="btn btn-primary" type="button" id="btn" value="删除"/>
</form>
<table class="table table-bordered table-hover definewidth m10">
<thead>
<tr>
<th width="5%"><input type="checkbox" id="checkAll"/>全选</th>
<th>部门编号</th>
<th>部门名称</th>
<th>部门备注</th>
<th>操作</th>
</tr>
</thead>
<s:iterator value="depts" status="st">
<tr>
<td><input type="checkbox" value="${id }" id="box_${st.index+1 }"/>${st.count }</td>
<td><s:property value="id"/></td>
<td><s:property value="name"/></td>
<td><s:property value="remark"/></td>
<td>
<a href="${path }/identity/showUpdateDept.action?dept.id=${id}">修改</a>
</td>
</tr>
</s:iterator>
</table>
<!-- 加分页标签 -->
<itcast:pager pageIndex="${pageModel.pageIndex }"
pageSize="${pageModel.pageSize }"
recordCount="${pageModel.recordCount }"
submitUrl="${path}/identity/selectDept.action?pageModel.pageIndex={0}"/>
</body>
</html>
5、接下来就是从后台拿到ids,从而来进行批量删除啦……
这里使用的是struts2控制层框架,看这里,在action层中设置了一个ids的属性,注意呢,这里的属性名一定要和前台传过来的属性名一样啊,同时在这里给它get,set方法,这里的话,就可以拿到ids的值了,如下图:
然后再调用identityService的deleteDept方法(this.identityService.deleteDept(ids.split(“,”));)
进行删除如下图:
注意呢,上图中注释掉的部分其实进行的是单个删除,这样做的效率非常低呢,
另一种方式就是批量删除呢(this.deptDao.deleteDepts(split);)
再看看它(这种高效率的方式)是如何自己来实现的吧,如下图:
上图就是对sql语句进行拼装,自己编写呢,然后把拿到的ids传进去,最后调用bulkUpdate()方法进行批量删除呢
bulkUpdate()它的实现是这样的:
到此,批量删除功能完结啦!!!!!!!!!!!!!!!!!!!!!!!!!!