JavaWeb学习-案例练习-图书管理后台-7-批量删除的JS实现

前面一篇完成了全选的实现过程，很自然地，我们就想接着去实现全部删除如何实现。批量删除有两种实现，第一种是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="&#28155;&#21152;"
class="button_add" onclick="addProduct()">&#28155;&#21152;
</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="&#28155;&#21152;"
class="button_add" onclick="addProduct()">&#28155;&#21152;
</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中我们写了代码onclick="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);
	}

}

JavaWeb学习-案例练习-图书管理后台-7-批量删除的JS实现

猜你喜欢