仿小米商城——后端功能批量删除

最新推荐文章于 2025-07-29 09:44:10 发布

原创最新推荐文章于 2025-07-29 09:44:10 发布 · 423 阅读

3 ·

CC 4.0 BY-SA版权

javaweb 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何使用jQuery实现在前端批量选择并删除多个用户记录的功能，包括全选复选框的联动效果、用户ID集合的传递及后端处理过程。

效果展示
在这里插入图片描述

前端如何把批量删除的uid集合传递到后端

jquery的点击事件

全选实现——点击第一个复选框时，剩下两个复选框自动变成选中的状态

在这里插入图片描述
在jsp中找到这个复选框，加上点击事件

在jQuery中，prop()函数用于设置或获取指定的属性，对于复选框来说checked就是它的属性，当我们点击这个复选框时，checked属性的值就为true，处于非选中状态值为false
首先获取复选框的选中属性的值，这个值用来设置其他复选框的值==$("#checkbox_main").prop(“checked”)==
var flag = $("#checkbox_main").prop(“checked”);
接着获取所有复选框（我们用foreach遍历的复选框的name属性值都为ids）
在这里插入图片描述
var ids =美元符号("[name=ids]");
将所有复选框的checked属性值设置为flag

也许有同学会问，能不能设置为true？答案是不太合适，如果设置为true的话，仅仅是将其他复选框设置为选中状态，如果再次点击，就是取消选中了，首个复选框处于未选中，剩下的复选框处于选中状态，并没有和首个复选框的状态保持一致

点击批量删除，发送选中用户的id到后台

在这里插入图片描述

批量删除按钮的点击事件
$("#batchDelete").click(function(){

})
要想获取选中用户的id就需要先获取所有选中的复选框
var ids = $("[name=ids]:checked");
this.value是each方法的属性，获取当前遍历元素的value
遍历所有选中的复选框，逐个取值，然后拼接成字符串
var str = “”;//定义一个空的字符串
ids.each(function(){
str += “,”+this.value;//this.value是each方法的属性，获取当前遍历元素的value
})
至此我们得到的数据形式为 ,2,3,4 但是后端需要的参数形式为2,3,4所以我们还要进行截取字符串的处理
str = str.substring(1);

最后将参数调教到后台
location.href = “${pageContext.request.contextPath}/user?method=batchDelete&ids=”+str;

后端实现

dao层
删除是根据用户的uid，批量删除就是根据一组用户的uid进行删除，所以uid必然是一个集合（或者说是数组）
又因为这个数组里的数据是不确定的，那这个sql又该如何去写呢？
其实不难想到条件查询里的in,in（）中括号里的内容就是一个数组或者是集合，操作时会对（）中的数据进行操作，例如in(1,2,3,4)这样的格式，所以我们只需要把这个集合动态传到dao层就ok了

public void batchDelete(String ids) {
		QueryRunner qr = new QueryRunner(C3p0Utils.getDataSource());
		String sql = "delete from user where uid in ("+ids+")";
		try {
			qr.update(sql);
		} catch (SQLException e) {
			e.printStackTrace();
		}
	}

service层

public void batchDelete(String ids) {
		userDao.batchDelete(ids);
	}

web层

//批量删除
	public void batchDelete(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String ids = request.getParameter("ids");
		UserService userService = new UserServiceImpl();
		userService.batchDelete(ids);
		//重定向刷新页面
		response.sendRedirect(request.getContextPath()+"/user?method=getUsers");
	}