网上图书商城项目学习笔记-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 ...
随机推荐
- blazeDS集成spring的remote访问
欢迎交流转载,请注明出处:http://www.cnblogs.com/shizhongtao/p/3490037.html 上一篇我只是简单实用blazeds创建了一个实例,大多数开发中,都是结合 ...
- CCM加密学习
这几天终于搞定了AES硬件加密工具的使用,几种简单的加密模式也都实验通过了,比较麻烦的一种是CCM模式的加密,它是CTR加密模式和CMAC认证算法的混合使用.本文先介绍CCM模式的原理与基本实现,然后 ...
- poj 2154 Color
这是道标准的数论优化的polya题.卡时卡的很紧,需要用int才能过.程序中一定要注意控制不爆int!!!我因为爆intWA了好久=_=…… 题目简洁明了,就是求 sigma n^gcd(i,n):但 ...
- java学习笔记_GUI(3)
如何加入自己定义的Panel import javax.swing.*; import java.awt.event.*; import java.awt.*; 5 class MyPanel ext ...
- 最全 Adobe 系列产品 CS6版本 序列号/注册码
最全 Adobe 系列产品 CS6版本 序列号/注册码: 1.Adobe Photoshop CS6 Extended 序列号/注册码 2.Adobe After Effects CS6 序列号/注册 ...
- 用C#对ADO.NET数据库完成简单操作
数据库访问是程序中应用最普遍的部分.随着C#和ADO.NET的引入,这种操作变得更简单.这篇文章将示范四种最基础的数据库操作. ● 读取数据.其中包括多种数据类型:整型,字符串,日期型. ● 写数据. ...
- linux与windows共享剪贴板(clipboard)
linux与windows共享剪贴板(clipboard)的方法 先说两句废话,其实linux和windows之间不需要共享剪贴板,直接在putty中,按住SHIFT+鼠标选择就可以了. 但是作为一种 ...
- java线程安全和线程同步
第一部分 线程安全(1)——变量安全 http://blog.csdn.net/cuiran/article/details/6150357 第二部分 线程安全(2)——ThreadLocal变量 h ...
- YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)
YII 框架源码分析 百度联盟事业部——黄银锋 目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 ...
- c# 判断点是否在区域内 点在区域内 在多边形内 判断
方法一 算法 : public int isLeft(Point P0, Point P1,Point P2) { int abc= ((P1.X - P0.X) ...