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

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

1.需求分析

当然页面是这样的

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

  1. 我们在每行的checkbox这个元素上,通过value=book.id 这种方式,把图书的id传进来。
  2. 得到全部checkbox元素,也就相当于拿到全部要删除图书的id
  3. 遍历循环图书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中我们写了代码ο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);
	}

}

 

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值