正文
一、功能简介
1.批量删除：获取要删除商品的id，在servlet进行判断并删除
2.全选：通过你点击这个节点找自己的父节点或兄弟节点
二、核心代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网上书城购物车</title> <script src="${pageContext.request.contextPath }/client/js/jquery-3.3.1.min.js"></script> </head> <body> <script type="text/javascript"> function jia(count,total,id,file){ count = parseInt(count); total = parseInt(total); if(count==total+1){ alert("已达到图书最大购买量"); count=total; }else if(count>100){ return; } location.href=file+"/removeBookServlet?book_id="+id+"&count="+count; } function remove(id,file){ var mes="确认删除图书?"; var remove=confirm(mes); if(remove){ location.href=file+"/removeBookServlet?book_id="+id+"&count=0"; } } function jian(count,total,id,file){ count = parseInt(count); total = parseInt(total); if(count==0){ var flag=window.confirm("确认删除图书?"); if(flag){ location.href=file+"/removeBookServlet?book_id="+id+"&count=0"; return; }else{ count=1; } } location.href=file+"/removeBookServlet?book_id="+id+"&count="+count; } </script> <script type="text/javascript"> $(function(){ $('#j_removeproducts').click(function(){ var arr=new Array(); var count=0; var flag=window.confirm("确定删除？"); if(flag){ $('[name=items]:checkbox').each(function(){ if($(this).prop('checked')){ arr[count++]=$(this).siblings('.myid2').val(); } }); location.href="/OnlineBookStore/batchDeleteServlet?id="+arr; } }); $("#AllChecked").click(function(){ var sum=0; var num=0; $('#AllCheck').prop('checked',this.checked); $('[name=items]:checkbox').prop('checked',this.checked); $('[name=items]:checkbox').each(function(){ if($(this).prop('checked')){ $('#checkout_btn').attr({"style":"background-color: #ff2832;cursor: pointer;"}); num+=parseInt($(this).siblings('input').val()); sum+=parseInt($(this).val()); }else{ $('#checkout_btn').removeAttr('style'); } }); $('#total').text("¥"+sum+".00"); $('#payAmount').text("¥"+sum+".00"); $('font').text(num); }); $("#AllCheck").click(function(){ var sum=0; var num=0; $('#AllChecked').prop('checked',this.checked); $('[name=items]:checkbox').prop('checked',this.checked); $('[name=items]:checkbox').each(function(){ if($(this).prop('checked')){ $('#checkout_btn').attr({"style":"background-color: #ff2832;cursor: pointer;"}); num+=parseInt($(this).siblings('input').val()); sum+=parseInt($(this).val()); }else{ $('#checkout_btn').removeAttr('style'); } }); $('#total').text("¥"+sum+".00"); $('#payAmount').text("¥"+sum+".00"); $('font').text(num); }); $('[name=items]:checkbox').click(function(){ $('[name=items]:checkbox').each(function(){ if(!$(this).prop('checked')){ $('#AllChecked').prop('checked',false); $('#AllCheck').prop('checked',false); } }); }); $('[name=items]:checkbox').click(function(){ var sum=0; var num=0; $('[name=items]:checkbox').each(function(){ if($(this).prop('checked')){ num+=parseInt($(this).siblings('input').val()); sum+=parseInt($(this).val()); $('#total').text("¥"+sum+".00"); $('#payAmount').text("¥"+sum+".00"); $('font').text(num); $('#checkout_btn').attr({"style":"background-color: #ff2832;cursor: pointer;"}); }else{ $('#total').text("¥"+sum+".00"); $('#payAmount').text("¥"+sum+".00"); $('font').text(num); } }); if(num==0){ $('#checkout_btn').removeAttr('style'); } }); $('#checkout_btn').click(function(){ var num=parseInt($('font').text()); var arr=new Array(); var date=new Array(); var count=0; if(num>0){ $('[name=items]:checkbox').each(function(){ if($(this).prop('checked')){ arr[count++]=$(this).siblings('.myid').val(); } }); location.href="/OnlineBookStore/settlementServlet?id="+arr+"&date="+date; } }); }); </script> <div> <jsp:include page="head.jsp"/> <jsp:include page="search.jsp"/> <div class="navg"><img src="${pageContext.request.contextPath }/client/images/book.jpg" alt="" height="100px" width="250px"></div> </div> <div class="logo_line"> <div class="w960"> <div class="shopping_procedure"><span class="current">我的购物车</span><span>填写订单</span><span>完成订单</span></div> </div> </div> <c:choose> <c:when test="${sessionScope.user==null }"> <div id="LoginFalse" class="login_tip"> <span class="icon"></span> 您还没有登录！登录后购物车的商品将保存到您的帐号中 <a href="${pageContext.request.contextPath }/client/login.jsp?action=1" class="btn">立即登录</a> </div> </c:when> <c:otherwise> <div id="LoginFalse" class="login_tip"> <span class="icon"></span> 亲，您已登录，赶快去购物吧！ </div> </c:otherwise> </c:choose> <div class="w960" id="cart"> <ul class="shopping_title" id="j_carttitle"> <li class="f1"><input type="checkbox" id="AllChecked"/> <label for="AllChecked">全选</label></li> <li class="f2">序号</li> <li class="f3">图书名称</li> <li class="f4">单价（元）</li> <li class="f5">数量</li> <li class="f6">金额（元）</li> <li class="f7">操作</li> </ul> <div class="fn-shops" id="J_cartContent"> <div class="fn-shop" data-shopids="0"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <c:forEach items="${sessionScope.cart}" var="entry" varStatus="vs"> <tr> <td style="width: 150px;padding-left: 63px;"><input type="checkbox" name="items" value="${entry.key.price*entry.value}" style="margin-top: 3px;"/> <input type="hidden" value="${entry.value }"/> <input type="hidden" class="myid2" value="${entry.key.book_id}"/> <input type="hidden" class="myid" value="${entry.key.book_id}"/> </td> <td style="width: 150px;float: left;margin-left: 5px;">${vs.count }</td> <td style="width: 150px;float: left;margin-left: -25px;"><a class="book_name">${entry.key.book_name}</a></td> <td style="width: 150px;float: left;margin-left: 1px;">¥${entry.key.price }0</td> <td style="width: 150px;float: left;margin-left: -5px;"> <img onclick="jian('${entry.value-1}','${sessionScope.num }','${entry.key.book_id }','${pageContext.request.contextPath }')" alt="-" src="${pageContext.request.contextPath }/client/images/jians.jpg" style="margin-top: 3px;cursor: pointer;"> <input type="text" class="num" value="${entry.value }" readonly="readonly"/> <img onclick="jia('${entry.value+1}','${sessionScope.num }','${entry.key.book_id }','${pageContext.request.contextPath }')" alt="+" src="${pageContext.request.contextPath }/client/images/jias.jpg" style="margin-left: -2px;margin-top: 3px;cursor: pointer;"> </td> <td style="width: 150px;float: left;margin-left: 6px;"><span style=" color:#ff2832;">¥${entry.key.price*entry.value}0</span></td> <td style="width: 70px;float: left;margin-left: 18px;"><a class="cao" href="javascript:void(0);" onclick="remove('${entry.key.book_id }','${pageContext.request.contextPath }')">删除</a></td> </tr> </c:forEach> <tr class="total"> <td><div class="row_img">店铺合计</div></td> <td class="row4"><span class="red big ooline alignright" id="total" style="color:#ff2832;font-size:16px;margin-left: 579px">￥0</span></td> </tr> </table> </div> </div> <div class="shop_total"> <div class="shopping_total_right"> <a class="total_btn fn-checkout unable" href="javascript:void(0);" id="checkout_btn" title="结算">结 算</a> <div class="subtotal"> <p><span class="cartsum">总计(不含运费)：</span><span id="payAmount" class="price">￥0</span></p> <p><span class="cartsum">已节省：</span><span id="totalFavor">¥0.00</span></p> </div> </div> <div class="shopping_total_left" id="J_leftBar"> <input type="checkbox" id="AllCheck"/> <label for="AllChecked">全选</label> <a id="j_removeproducts" href="javascript:void(0);" class="fn-batch-remove" title="批量删除按钮">批量删除</a> <span>已选择<font color="red">0</font>件商品</span> </div> </div> </div> </body> </html>
package cn.bookstore.servlet; import java.io.IOException; import java.util.Iterator; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.bookstore.domain.Book; /** * 批量删除 */ @WebServlet("/batchDeleteServlet") public class batchDeleteServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String id=request.getParameter("id"); String[] myid=id.split(","); Map<Book,Integer> cart=(Map<Book, Integer>) request.getSession().getAttribute("cart"); /** * Map的实现不是同步的。如果程序中出现多个线程同时访问一个Map，而其中至少一个线程修改Map时， 它必须保持外部同步。而通过查看Iterator原理发现，Iterator是工作在一个独立的线程中，并且拥有一个 mutex锁， 就是说Iterator在工作的时候，是不允许被迭代的对象被改变的，所以调用Iterator操作获得的对象在多线程修改Map的时候会自动失效。 */ Iterator<Book> it = cart.keySet().iterator(); if(cart.size()==myid.length){ cart.clear(); }else{ while(it.hasNext()) { Book book=it.next(); for(String bookid:myid){ if(bookid.equals(book.getBook_id())){ System.out.println("移出书籍："+book.getBook_name()); it.remove(); } } } } request.getRequestDispatcher("/client/shoppingcart.jsp").forward(request, response); return; } }
效果图
批量删除
