网上图书商城项目学习笔记-014购物车模块页面javascrip
一、流程分析
二、代码
1.view层
(1）list.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cartlist.jsp</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script src="<c:url value='/jquery/jquery-2.2.0.js'/>"></script>
<script src="<c:url value='/js/round.js'/>"></script> <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
<script>
$(function(){
showTotal();
initCheckBox();
initCheckAll();
initJia();
initJian();
}); /*
给全选添加click事件
*/
function initCheckAll() {
$("#selectAll").click(function() {
var bool = $(this).prop("checked");
$("input[type=checkbox][name=checkboxBtn]").prop("checked", bool);
setJieSuan(bool);
showTotal();
});
}
/*
给所有条目的复选框添加click事件
*/
function initCheckBox() {
$("input[type=checkbox][name=checkboxBtn]").click(function() {
var all = $("input[type=checkbox][name=checkboxBtn]").length;//所有条目的个数
var selected = $("input[type=checkbox][name=checkboxBtn]:checked").length;
var selectAll = $("#selectAll");
if(all == selected) {//全都选中
selectAll.prop("checked", true);
setJieSuan(true);//让结算按钮有效
} else if(selected == 0) {//全都没选中
selectAll.prop("checked", false);
setJieSuan(false);
} else {
selectAll.prop("checked", false);
setJieSuan(true);
}
showTotal();
});
} /*
* 设置结算按钮样式
*/
function setJieSuan(bool) {
var jiesuan = $("#jiesuan");
if(bool) {
jiesuan.removeClass("kill").addClass("jiesuan");
jiesuan.unbind("click");//撤消当前元素的所有click事件
} else {
jiesuan.removeClass("jiesuan").addClass("kill");
jiesuan.click(function() {return false});
}
} /*
* 计算总计
*/
function showTotal() {
var total = 0;
var id;
var text;
$("input[type=checkbox][name=checkboxBtn]:checked").each(function( index, domEle) {
id = $(domEle).val();
text = $("#" + id + "Subtotal").text();
total += Number(text);
});
$("#total").text(total);
} // 给加号添加click事件
function initJia() {
$(".jia").click(function() {
var id = $(this).prop("id").substring(0, 32);
var quantity = $("#" + id + "Quantity").val();
sendUpdateQuantity(id, Number(quantity) + 1);
});
} // 给减号添加click事件
function initJian() {
$(".jian").click(function() {
var id = $(this).prop("id").substring(0, 32);
var quantity = $("#" + id + "Quantity").val();
// 判断当前数量是否为1，如果为1,那就不是修改数量了，而是要删除了。
if(quantity == 1){
if(confirm("您是否真要删除该条目？"))
location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
} else {
sendUpdateQuantity(id, quantity-1);
}
});
} // 请求服务器，修改数量。
function sendUpdateQuantity(id, quantity) {
$.ajax({
async : false,
cache : false,
url : "/goods/CartItemServlet",
data : {method:"updateQuantity", cartItemId:id, quantity:quantity},
type : "POST",
dataType : "json",
}).done(function(data) {
$("#" + id + "Quantity").val(data.quantity);
$("#" + id + "Subtotal").text(data.subtotal);
showTotal();
});
}
</script>
</head>
<body> <c:choose>
<c:when test="${empty items }">
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img align="top" src="<c:url value='/images/icon_empty.png'/>"/>
</td>
<td>
<span class="spanEmpty">您的购物车中暂时没有商品</span>
</td>
</tr>
</table>
</c:when> <c:otherwise>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#efeae5">
<td align="left" width="50px">
<input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全选</label>
</td>
<td colspan="2">商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr> <c:forEach items="${items }" var="item"> <tr align="center">
<td align="left">
<input value="${item.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
</td>
<td align="left" width="70px">
<a class="linkImage" href="<c:url value='/BookServlet?method=load&bid=${item.book.bid }'/>"><img border="0" width="54" align="top" src="<c:url value='${item.book.image_b }'/>"/></a>
</td>
<td align="left" width="400px">
<a href="<c:url value='/BookServlet?method=load&bid=${item.book.bid }'/>"><span>${item.book.bname }</span></a>
</td>
<td><span>¥<span class="currPrice" id="${item.cartItemId }CurrPrice">${item.book.currPrice }</span></span></td>
<td>
<a class="jian" id="${item.cartItemId }Jian"></a><input class="quantity" readonly="readonly" id="${item.cartItemId }Quantity" type="text" value="${item.quantity }"/><a class="jia" id="${item.cartItemId }Jia"></a>
</td>
<td width="100px">
<span class="price_n">¥<span class="subTotal" id="${item.cartItemId }Subtotal">${item.getSubtotal() }</span></span>
</td>
<td>
<a href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${item.cartItemId }'/>">删除</a>
</td>
</tr>
</c:forEach> <tr>
<td colspan="4" class="tdBatchDelete">
<a href="javascript:batchDelete();">批量删除</a>
</td>
<td colspan="3" align="right" class="tdTotal">
<span>总计：</span><span class="price_t">¥<span id="total"></span></span>
</td>
</tr>
<tr>
<td colspan="7" align="right">
<a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
</td>
</tr>
</table>
<form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
<input type="hidden" name="cartItemIds" id="cartItemIds"/>
<input type="hidden" name="total" id="hiddenTotal"/>
<input type="hidden" name="method" value="loadCartItems"/>
</form>
</c:otherwise>
</c:choose> </body>
</html>
(2)round.js
function round(num,dec){
var strNum = num + '';/*把要转换的小数转换成字符串*/
var index = strNum.indexOf("."); /*获取小数点的位置*/
if(index < 0) {
return num;/*如果没有小数点，那么无需四舍五入，返回这个整数*/
}
var n = strNum.length - index -1;/*获取当前浮点数，小数点后的位数*/
if(dec < n){
/*把小数点向后移动要保留的位数，把需要保留的小数部分变成整数部分，只留下不需要保留的部分为小数*/
var e = Math.pow(10, dec);
num = num * e;
/*进行四舍五入，只保留整数部分*/
num = Math.round(num);
/*再把原来小数部分还原为小数*/
return num / e;
} else {
return num;/*如果当前小数点后的位数等于或小于要保留的位数，那么无需处理，直接返回*/
}
}
网上图书商城项目学习笔记-014购物车模块页面javascrip的更多相关文章
- 网上图书商城项目学习笔记-011Book模块查询(分页)
一.流程分析 1.图书模块 2.分布分析 二.代码 1.view层 1)list.jsp <%@ page language="java" import="java ...
- 网上图书商城项目学习笔记-012BOOK模块查询2
一.分析 > 按图名查询(模糊)(分页)> 按作者查询(分页)> 按出版社查询(分页)> 按id查询> 多条件组合查询(分页) 二.代码 1.view层 (1)gj.js ...
- 网上图书商城项目学习笔记-037工具类之BaseServlet及统一中文编码
1.统一中文编码分析 tomcat默认esetISO-8859-1编码,在servlet中,可能通过request的setCharacterEncoding(charset)和response.set ...
- 网上图书商城项目学习笔记-036工具类之CommonUtils及日期转换器
1.CommonUtils.java package cn.itcast.commons; import java.util.Map; import java.util.UUID; import or ...
- 网上图书商城项目学习笔记-035工具类之JdbcUtils及TxQueryRunner及C3P0配置
事务就是保证多个操作在同一个connection,TxQueryRunner通过JdbcUtils获取连接,而JdbcUtils通过ThreadLocal<Connection>确保了不同 ...
- 【Java EE 学习 25 上】【网上图书商城项目实战】
一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...
- 基于SSH的网上图书商城-JavaWeb项目-有源码
开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 技术:Java:JSP:JDBC,struts2,spring,hibernate数据库: mysqlweb ...
- JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验
1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...
- JavaWeb网上图书商城完整项目--24.注册页面的css样式实现
现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...
随机推荐
- javascript笔记——jqGrid再次封装
xingrunzhao js插件再次封装 demo 'use strict'; /** * commerce grid框架 * 依赖jqgrid */ (function ($_self, jQuer ...
- AE实现点击一个要素，并显示其属性
第一步:根据鼠标点击处的点,找到被选中的要素 public IFeature Find2(IPoint pPoint) { ITopologicalOperator pTopoOpe = pPoint ...
- MSDN 2005 安装问题
在安装玩Visual Studio MSDN 2005时,经常会出现这种问题:“无法显示 Microsoft 文档资源管理器,因为指定的帮助集合“ms-help://MS.MSDNQTR.v” 网上 ...
- hadoop2-shell操作详解
- 如何解决NTLDR is missing
问题:ntldr文件不见了,无法进入系统.本系统win XP 简体中文32位 解决步骤: (1)我找来一张win XP 英文版 32位的系统光盘(用U盘驱动也行) (2)重新启动计算机,并进入CMOS ...
- 打破常规——大胆尝试在路由器上搭建SVN服务器
注册博客园挺久了,一直比较懒,虽然有几次想写点文章,但是一直没有行动,今天给大家带来一篇比较有意思的文章,不涉及技术上的,希望大家轻拍.本文的文字和图片全部为原创,尊重作者转载请注明出处! 说起路由器 ...
- Spark小课堂Week6 启动日志详解
Spark小课堂Week6 启动日志详解 作为分布式系统,Spark程序是非常难以使用传统方法来进行调试的,所以我们主要的武器是日志,今天会对启动日志进行一下详解. 日志详解 今天主要遍历下Strea ...
- Spark Streaming揭秘 Day8 RDD生命周期研究
Spark Streaming揭秘 Day8 RDD生命周期研究 今天让我们进一步深入SparkStreaming中RDD的运行机制.从完整的生命周期角度来说,有三个问题是需要解决的: RDD到底是怎 ...
- esp8266的STM32驱动
esp8266的STM32驱动,数据发送接收由DMA完成,释放CPU. 目前只能发送返回消息为成功或失败的AT命令,并判断是否成功,详见esp8266_cmd():其它返回消息不可预知的命令(如查看A ...
- Swift与Objective-C的对比
WWDC 2014上苹果再次惊世骇俗的推出了新的编程语言Swift 雨燕, 这个消息会前没有半点风声的走漏.消息发布当时,会场一片惊呼,相信全球看直播的码农们当时也感觉脑袋被敲了一记闷棍吧.于是熬夜学 ...