小伙伴们,你们好呀,我是老寇
目录
一、功能简介
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;
}
}
效果图
批量删除
如果能解决您的问题,将不胜荣幸!!!