利用Ajax创建批量删除的功能
1、先实现逐条删除:
在user-list.jsp中
<a href="${pageContext.request.contextPath}/user/delete.do?id=${userInfo.id}" class="btn bg-olive btn-xs">删除</a>在controller层中实现delete函数:
@RequestMapping("update.do") public String update(UserInfo userInfo){ userInfoService.update(userInfo); return "redirect:findAll.do"; }server层
@Override public void delete(int id) { userInfoDao.delete(id); }Dao以及UserInfomapper 中的代码:
void delete(int id); //mapper <delete id="delete" parameterType="int"> delete from userinfo where id=#{id} </delete>2、批量删除功能:
(1)将js文件夹添加到webapp的文件下
(2)在user-list中使用声明删除
<button type="button" class="btn btn-default" title="删除" onclick="deleteAll()"> <i class="fa fa-refresh"></i> 删除 </button>在文件的<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> function deleteAll(){ var checkNum=$("input[name='ids']:checked").length; if(checkNum==0){ alert("请至少选择一项"); return; } if(confirm("确定要删除吗?")){ var userList=new Array(); $("input[name='ids']:checked").each(function () { userList.push($(this).val()) }); } $.ajax({ type:"post", url:"${pageContext.request.contextPath}/user/deleteAll.do", data:{userList:userList.toString()}, success:function () { alert("删除成功"); location.reload(); }, error:function () { alert("删除失败"); } }) } </script></head>添加内容。
(3)controller层中:
@RequestMapping("deleteAll.do") @ResponseBody public String deleteAll(String userList){ String[] strs=userList.split(","); List<Integer> ids=new ArrayList<>(); for(int i=0;i<strs.length;i++){ ids.add(Integer.parseInt(strs[i])); } userInfoService.deleteAll(ids); return ""; }(4)service
public void deleteAll(List<Integer> ids){ userInfoDao.deleteAll(ids); }(5)Dao以及userInfoMapper中代码:
void deleteAll(List<Integer> ids); <delete id="deleteAll" parameterType="list"> delete from userinfo where id in <foreach collection="list" item="id" open="(" close=")" separator=","> #{id} </foreach> </delete>最终实现批量删除的功能。