这几天在自己动手实践去做批量删除的时候找不到头绪,网上搜索了许多才看懂了,这里自己整合归纳一下:
先看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>