javaweb开发SSM框架中如何做批量删除(ajax响应数据异步刷新)

这几天在自己动手实践去做批量删除的时候找不到头绪,网上搜索了许多才看懂了,这里自己整合归纳一下:
先看jsp中的代码,给批量删除的按钮一个onclick点击事件,调用下面的写的js方法,批量删除按照我的理解就是根据指定的id获取多选框的值保存到一个数组中,然后在后台循环遍历这个数组中的id值实现根据id删除数据库数据,然后响应ajax实现异步刷新页面;
下面的代码中给多选框 设置id值id=“ids” name=“ids”

<button type="button" class="btn btn-danger m-r-3" onclick="deleteAll()">
	<i class="mdi mdi-window-close"></i>批量删除
</button>
<table class="table table-bordered" id="tbRecord">
										<thead>
											<tr>
												<th style="width: 50px;"><label
													class="checkbox checkbox-primary"> <input
														type="checkbox" id="check-all"><span></span>
												</label></th>
												<th style="width: 100px;">编号</th>
												<th class="text-center">商品名称</th>
												<th class="text-center">商品图片</th>
												<th class="text-center">原价</th>
												<th class="text-center">折扣价</th>
												<th class="text-center">种类</th>
												<th class="text-center">描述</th>
												<th class="text-center">操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${pageInfo.list}" var="pro">
												<tr>
													<td style="width: 50px;"><label
														class="checkbox checkbox-primary"> <input
															type="checkbox" name="ids" id="ids" value="${pro.pid}"><span></span>
													</label></td>
													<td style="width: 100px;">${pro.pid}</td>
													<td class="text-center">${pro.pname}</td>
													<td class="text-center"><img alt="商品图片"
														src="/imgUrl/product/${pro.img}"
														class="img-circle" style="height: 50px; width: 50px;">
													</td>
													<td class="text-center">¥${pro.originalPrice}</td>
													<td class="text-center">¥${pro.discountPrice}</td>
													<td class="text-center">${pro.producttype.typeName}</td>
													<td>${pro.describe}</td>
													<td class="text-center">
														<div class="btn-group">
							                            <a onclick="btn_edit(${pro.pid})" class="btn btn-xs btn-default" href="#!" title="编辑" data-toggle="modal" data-target="#myModalUpdate"><i class="mdi mdi-pencil"></i></a>
							                            <a class="btn btn-xs btn-default" href="javascript:void(0);" onclick='deleteProduct(${pro.pid})' title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
							                          		
							                          </div>
													</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>

然后是js中的代码:

<script type="text/javascript">
<!-- 批量删除的操作 -->
   function deleteAll() {
      var checkNum=$("input[name='ids']:checked").length;
      if(checkNum==0){
          alert("请至少选择一项");
          return;
           }
           if(confirm("确定要删除吗?")){
               var productList=new Array();
               $("input[name='ids']:checked").each(function () {
            	   productList.push($(this).val())
               });
           }
           $.ajax({
               type:"post",
               url:"${ctx}/deleteMany",//controller中的请求路径
               data:{productList:productList.toString()},
               success:function (data) {
            	   if(data.result>0){
            		   alert("删除成功")
                       location.reload();
            	   }
                   
               },
               error:function () {
                   alert("删除失败")
               }
      })
       }
</script>

后台controller中的代码
从jsp页面的js方法传递一个productList的字符串,然后将这个字符串进行分割,将分割得到到ids值传递给具体的删除方法

//批量删除的请求
	@RequestMapping(value="/deleteMany")
	@ResponseBody
	public Object deleteSelect(@RequestParam("productList") String productList,Model model) {
		String[] strs=productList.split(",");
	    List<Integer> ids=new ArrayList<>();
	    for(int i=0;i<strs.length;i++){
	        ids.add(Integer.parseInt(strs[i]));
	    }
	    Map<String, Integer> map=new HashMap<String, Integer>();
		boolean isOk=productService.deleteMany(ids);
		if(isOk) {
			map.put("result",1);
		}else {
			map.put("result",0);
		}
		return JSON.toJSONString(map);
	}

service中的接口

boolean deleteMany(List<Integer> ids);

service中接口的实现方法:

public boolean deleteMany(List<Integer> d) {
		int result=productDao.deleteMany(d);
		if(result>0) {
			return true;
		}else {
			return false;
		}
	}

dao中的接口:

//批量删除商品信息的方法
	int deleteMany(List<Integer> d);

最后看看mapper.xml中的sql

<!-- 批量删除商品信息的方法 -->
	<delete id="deleteMany" parameterType="List">
		delete from tea_product where pid in
		<foreach collection="list" item="d" index="no" open="(" separator="," close=")">
			#{d}
		</foreach>
	</delete>
  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值