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

末蓝、 2021-12-22 23:59 258阅读 0赞

前面一篇完成了全选的实现过程，很自然地，我们就想接着去实现全部删除如何实现。批量删除有两种实现，第一种是JS，第二种是以提交表单的方式，这篇来看看JS方式如何实现。

**1.需求分析**

当然页面是这样的

![20190629231055260.png][]

我们肯定不能在全选之后，点击上面红圈中任何一个X来进行批量删除，那么这个批量删除的如何实现呢，思路如下:

1.  我们在每行的checkbox这个元素上，通过value=book.id 这种方式，把图书的id传进来。
2.  得到全部checkbox元素，也就相当于拿到全部要删除图书的id
3.  遍历循环图书id，执行delete sql方法，这个根据id删除图书，我们前面代码已经实现过了。

所以，我们还需要在表格右上角，添加的前面加一个批量删除的按钮。

**2.代码实现**

**2.1 先添加批量删除这个按钮**

找到这几行代码，复制一段，用来写批量删除代码

批量删除代码

效果是这样的

![20190629232128116.png][]

2.2 checkbox中添加value属性，值为book.id

通过这种方法把book.id给拿到。

之前这块的代码是写到了name=ids，现在补上value=b.id.

**3.3JS 批量删除代码实现**

在3.1中我们写了代码οnclick="delAllBook()",所以我们需要写一个delAllBook()的JS方法。

在list.jsp中添加的JS函数如下，这个是debug版本

测试下效果，看看str拼接的效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

所以上面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);
    	}
    
    }

[20190629231055260.png]: /images/20211220/d365d1293b0247eebe994cf8215174a1.png
[20190629232128116.png]: /images/20211220/301ebc6ce67b4fb09595610a0f890b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20211220/53c61bd4f22a4d72b8c24de67341aa98.png