前面一篇完成了全选的实现过程,很自然地,我们就想接着去实现全部删除如何实现。批量删除有两种实现,第一种是JS,第二种是以提交表单的方式,这篇来看看JS方式如何实现。
1.需求分析
当然页面是这样的
我们肯定不能在全选之后,点击上面红圈中任何一个X来进行批量删除,那么这个批量删除的如何实现呢,思路如下:
- 我们在每行的checkbox这个元素上,通过value=book.id 这种方式,把图书的id传进来。
- 得到全部checkbox元素,也就相当于拿到全部要删除图书的id
- 遍历循环图书id,执行delete sql方法,这个根据id删除图书,我们前面代码已经实现过了。
所以,我们还需要在表格右上角,添加的前面加一个批量删除的按钮。
2.代码实现
2.1 先添加批量删除这个按钮
找到这几行代码,复制一段,用来写批量删除代码
<td class="ta_01" align="right">
<button type="button" id="add" name="add" value="添加"
class="button_add" onclick="addProduct()">添加
</button>
</td>
批量删除代码
<td class="ta_01" align="right">
<button type="button" id="delAll" name="del" value="批量删除"
class="button_del" onclick="delAllBook()">批量删除</button>
<button type="button" id="add" name="add" value="添加"
class="button_add" onclick="addProduct()">添加
</button>
</td>
效果是这样的
2.2 checkbox中添加value属性,值为book.id
通过这种方法把book.id给拿到。
<td style="CURSOR: hand; HEIGHT: 22px" align="center"
width="23"><input type="checkbox" name="ids" value="${b.id }" /></td>
之前这块的代码是写到了name=ids,现在补上value=b.id.
3.3JS 批量删除代码实现
在3.1中我们写了代码οnclick="delAllBook()",所以我们需要写一个delAllBook()的JS方法。
在list.jsp中添加的JS函数如下,这个是debug版本
function delAllBook(){
//得到所有复选框元素
var eles = document.getElementsByName("ids");
var str="";
//循环得到复选框中元素的value值,也就是图书的id
for(var i=0; i<eles.length; i++){
if(eles[i].checked){
str +="ids="+ eles[i].value +"&";
}
}
str = str.substring(0, str.length-1);
alert(str);
//跳转到一个servlet,例如delAllBookServlet
location.href="${pageContext.request.contextPath}/delAllBookServlet?"+str;
}
测试下效果,看看str拼接的效果
所以上面substring(0, str.length-1)的意思就像去除末尾的符号“&”
接下来开始写DelAllBookServlet.java代码
package com.anthony.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.anthony.service.BookService;
import com.anthony.service.BookServiceImpl;
public class DelAllBookServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取表单数据,得到所有id
String[] ids = request.getParameterValues("ids");
//实现业务逻辑
BookService bs = new BookServiceImpl();
for (String id : ids) {
bs.delBook(id);
}
//处理跳转
request.getRequestDispatcher("/bookListServlet").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
其实如果你不想再写一遍Dao层和service层代码,你这样在这里循环写也是可以的。规范一些来说,我们还是应该走创建相关service方法和相关dao层方法。
Dao层接口和方法
接口文件新增一个方法
public void delAllBook(String[] ids) throws SQLException;
该方法的具体实现(BookDaoImpl.java)
public void delAllBook(String[] ids) throws SQLException {
QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
Object[][] params = new Object[ids.length][];
for (int i = 0; i < params.length; i++) {
params[i] = new Object[] {ids[i]};
}
qr.batch("delete from book where id=?", params);
}
service接口和方法
public void delAllBook(String[] ids);
该方法的具体实现(BookServiceImpl.java)
public void delAllBook(String[] ids) {
try {
bd.delAllBook(ids);
} catch (SQLException e) {
e.printStackTrace();
}
}
这个时候DelAllBookServlet.java代码
package com.anthony.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.anthony.service.BookService;
import com.anthony.service.BookServiceImpl;
public class DelAllBookServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取表单数据,得到所有id
String[] ids = request.getParameterValues("ids");
//实现业务逻辑
BookService bs = new BookServiceImpl();
bs.delAllBook(ids);
//处理跳转
request.getRequestDispatcher("/bookListServlet").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}