引入依赖库:
引入jstl标签库。
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
由于使用了jquery来实现dom操作,需要在界面中引入jquery库。
<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-3.3.1.js"></script>
页面代码:
<div class="tro_tab_h">
<div class="col tro_tab_check">
<h1 class="tro_tab_check_p">√</h1>
<span class="tro_tab_check_sp">全选</span>
</div>
<div class="col tro_tab_img">
</div>
<p class="col tro_tab_name">商品名称</p>
<div class="col tro_tab_price">单价</div>
<div class="col tro_tab_num">数量</div>
<div class="col tro_tab_total">小计</div>
<div class="col tro_tab_action">操作</div>
</div>
<!-- 动态数据开始 -->
<c:forEach items="${trolleyList }" var="trolley" varStatus="vs">
<div class="tro_tab_h1">
<div class="col tro_tab_check">
<h1 class="tro_tab_check_p" style="background-color: #fff">
<input type="checkbox" name="ids" class="ids" value="${trolley.tid}">
</h1>
<span class="tro_tab_check_sp"></span>
</div>
<div class="col tro_tab_img">
<img src="/xiaomimallpic/${trolley.commodity.photo}" alt="">
</div>
<div class="col tro_tab_name">
<!--<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>-->
<li class="tro_tab_name_li1" style="font-size: 16px;">${trolley.commodity.cname} ${trolley.commodity.color}</li>
</div>
<div class="col tro_tab_price">
<span id="price_${trolley.tid}">${trolley.commodity.price}</span><span>元</span>
</div>
<div class="col tro_tab_num">
<a class="tro_tab_num_p1" id="subtract_${trolley.tid }" class="subtract" type="${trolley.number}" href="javascript:void(0)" onclick="reduceNumber(${trolley.tid},this.type)">-</a>
<input type="number" value="${trolley.number}" id="num_${trolley.tid}" class="num" onchange="changeNumber(${trolley.tid})"/>
<a class="tro_tab_num_p2" id="plus_${trolley.tid }" class="plus" type="${trolley.number}" href="javascript:void(0)" onclick="addNumber(${trolley.tid},this.type)">+</a>
</div>
<div class="col tro_tab_total ">
<c:set var="sumPrice" value="${sumPrice+ (trolley.number*trolley.commodity.price)}"></c:set>
<span class="tro_tab_total_value" id="prices_total_${trolley.tid}" >${trolley.number*trolley.commodity.price}</span>元
</div>
<div class="col tro_tab_action" style="cursor: pointer;width: 40px;height: 40px;" onclick="delTrolleyCommodityByTid(${trolley.tid})">删除</div>
</div>
</c:forEach>
需求分析:
- 在点击加减链接后调用后台加减商品请求,调用成功后返回,并将中间数量实现加1或减1。商品数量最小是1,前台和后台都有限制,最大数量由后台限制。
- 输入商品数量后调用后台更改商品数量请求,调用成功后返回。
- 不管是通过点击还是直接输入数字修改商品数量,调用成功返回后,都要更新商品小计金额。
- 点击左边第一列的选框时,实时统计选中的商品总数,同时算出选中商品的小计总和并作为合计金额。
- 选中第一列选框后,同时修改商品数量,合计金额也随着改变。
- 实现点击删除。
- 点击去结算时,判断有没有选中商品,选中后才可结算。
功能实现:
-
a. 在选框的选中状态发生改变和商品数量发生改变时,会调用统计商品总类和合计金额的函数,更新总数和合计。
-
b. 点击链接增加或减少商品数量。
- 在链接处使用添加onclick方法和type属性,type属性值为商品的数量,onclick的方法的参数为购物车tid和当前的type的值(this.type)。
- 设置显示数量的input的框的id为“num_${trolley.tid}”,即为动态的,id的后缀为购物车tid,其value为商品数量。
- 在修改商品数量函数中将购物车tid和数量传入后台,修改数量成功后返回,然后根据购物车tid修改显示数量的input的value。
- 设置价格标签的id为"price_美元符{trolley.tid}",小计标签的id为“prices_total_${trolley.tid}”,显示数量的input的value被修改后,根据购物车的tid来修改当前商品的小计。
- 当在显示数量的input中输入有效数字时,调用onchange函数,参数为购物车的tid,根据tid获取input的id来去得到当前input的value值。使用tid和数量作为参数调用后台修改数量请求,请求处理成功后,根据购物车的tid来修改当前商品的小计。
-
c. 给删除标签设置onclick函数,参数为购物车的tid,点击后使用tid为参数调用后台删除请求完成删除。
-
d. 完整实现请参考页面代码和js代码。
完整js代码如下:
<script type="text/javascript">
//左侧选框状态改变时调用
$(".ids").change(function(){
//选中时统计总金额和商品种类
changeTotalPriceAndNumber();
})
//统计总金额和商品种类
function changeTotalPriceAndNumber(){
//商品种类
var sum=0;
//统计合计金额
var sumPrice=0;
//获取选中的数量
$('input[name="ids"]:checked').each(function(){
var tid=$(this).val();
var price=$("#prices_total_"+tid).html();
sumPrice=sumPrice*1+price*1;
sum=sum+1;
});
//更新商品总数
$("#sumSize").html(sum);
//更新合计
$("#close").html(sumPrice);
}
//点击减号时调用
function reduceNumber(tid,num){
var tid=parseInt(tid);
var num=parseInt(num);
var price=$("#price_"+tid).html();
if(num>1){
$.ajax({
url:"${pageContext.request.contextPath }/trolley?key=reduceTrolleyCommodityNumber",
type: "post",
dataType:"text",
data:"number="+num+"&ids="+tid,
success:function(obj){
if(obj="ok"){
//更新数量
$("#num_"+tid).val(num-1);
//更新当前type值
$("#subtract_"+tid).attr("type",num-1);
//设置增加按钮的type值同步减少的type值
$("#plus_"+tid).attr("type",num-1);
//更新小计金额
$("#prices_total_"+tid).html((1*(num-1))*(price*1));
//数量改变时调用统计总金额和商品种类
changeTotalPriceAndNumber();
//window.location.reload();
}
}
})
}
}
//点击加号时调用
function addNumber(tid,num){
var tid=parseInt(tid);
var num=parseInt(num);
var price=$("#price_"+tid).html();
console.log(".num="+num+"tid="+tid+";price="+price);
$.ajax({
url:"${pageContext.request.contextPath }/trolley?key=addTrolleyCommodityNumber",
type: "post",
dataType:"text",
data:"number="+num+"&ids="+tid,
success:function(obj){
if(obj="ok"){
//更新数量
$("#num_"+tid).val(num+1);
//更新当前type值
$("#plus_"+tid).attr("type",num+1);
//设置减少按钮的type值同步增加按钮的type值
$("#subtract_"+tid).attr("type",num+1);
//更新小计金额
$("#prices_total_"+tid).html((1*(num+1))*(price*1));
//数量改变时调用统计总金额和商品种类
changeTotalPriceAndNumber();
}
}
})
}
//直接修改商品数量时调用
function changeNumber(tid){
//var tid=parseInt(tid);
var num=parseInt($("#num_"+tid).val());
var price=$("#price_"+tid).html();
if(num<1){
//设置数量为1
$("#num_"+tid).val(1);
alert("至少有一个商品!")
}
$.ajax({
url:"${pageContext.request.contextPath }/trolley?key=changeTrolleyCommodityNumber",
type: "post",
dataType:"text",
data:"number="+num+"&ids="+tid,
success:function(obj){
if(obj="ok"){
//更新小计金额
$("#prices_total_"+tid).html((1*num)*(price*1));
}
}
})
}
//点击删除时调用
function delTrolleyCommodityByTid(tid){
if(confirm("确认要删除选中的数据吗")){
var tid=parseInt(tid);
$.ajax({
url:"${pageContext.request.contextPath }/trolley?key=delTrolleyCommodityByTid",
type: "post",
dataType:"text",
data:"ids="+tid,
success:function(obj){
if(obj="ok"){
window.location.reload();
}
}
})
}
}
//点击去结算时调用
function pay(){
var num= $(".ids:checked").length;
var ids=[];
var sumSize=$("#sumSize").html();
var sumPrice=$("#close").html();
if(sumSize==0||sumPrice==0){
alert("请先购物再结算!");
return;
}
//从购物车获取选中的商品
$('input[name="ids"]:checked').each(function(){
ids.push($(this).val());
});
//如果没有勾选就提示
if(num==0){
alert("请先勾选需要结算的商品!");
return;
}
console.log(ids);
window.location="${pageContext.request.contextPath}/orders?key=insertOrders&sumPrice="+sumPrice+"&sumNum="+sumSize+"&ids="+ids;
}
</script>