网上图书商城项目学习笔记-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 ...
随机推荐
- Sublime Text 3初体验之Package Control
http://www.imooc.com/article/12616 下面介绍几款Sublime Text 常用Package 1.Emmit 2.JavaScript & NodeJS Sn ...
- css3学习笔记之边框
CSS3 圆角 border-radius 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <h ...
- CSS Sprites优点
在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 例如淘宝的css sprites ...
- indeed2017校招在线编程题（网测）三
A. Calculate Sequence 分析:就是斐波那契递推公式,但是初始值是指定的,只用求第10个数,数据范围和复杂度都比较小,直接写. B. 忘了叫啥了. 就是有a-j十个字符组成的字符串, ...
- An Easy Task
An Easy Task Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total ...
- iOS进阶——可取消的block
+ (id)performBlock:(void (^)())aBlock onQueue:(dispatch_queue_t)queue afterDelay:(NSTimeInterval)del ...
- 7.JAVA_SE复习（文件）
文件和流 1.什么是节点流和处理流 InputStream & OutputStream Reader & Writer 乃节点流, 前面加File之类的名词 的节点流 其余加动词的均 ...
- 《PHP扩展开发及内核应用》
https://github.com/walu/phpbook/blob/master/preface.md
- IE6/IE7中li底部4px的Bug
当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...
- 装tortoiseSVN时遇到的坑
今天给新电脑配置开发环境,线上SVN地址申请权限以后,在本地装了tortoiseSVN,可是安装了以后死活打不开.明明浏览器里可以打开SVN地址,但是tortoiseSVN的浏览器里却打不开,摆弄了很 ...