网上图书商城项目学习笔记-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 ...
随机推荐
- Normalize [ 浏览器渲染格式化 ]
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to san ...
- Tomcat上配置连接池{ connect error=Name [jdbc/OracleDB] is not bound in this Context. Unable to find [jdbc]}
. 在学习期间,从未实践过在tomcat上配置连接池,今天终于实现一次,在tomcat玩了一把,不知道你是否现在有和我一样的困境.废话少说直接上代码 java public static Con ...
- Illegal pattern character 'i' 解决问题
java.lang.IllegalArgumentException: Illegal pattern character 'i' at java.text.SimpleDateFormat.comp ...
- xposed系列教程
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/xposed-series/ 说明 这是一篇XPOSED开发系列教程, 个人开发者,开发不容易.QQ群: 73 ...
- random between [a,b]、(a,b]、[a,b)
#include <iostream> #include <ctime> #include <cstdlib> using namespace std; ; /*c ...
- iOS 非ARC基本内存管理系列 1-引用计数器
1.什么是内存管理 移动设备的内存极其有限,每个app所能占用的内存是有限制的 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收一些不需要使用的对象.变量 ...
- hash桶
#include <stdio.h> #include <stdlib.h> #include "chain.c" //include the chain. ...
- nginx的安装与配置
1.nginx的安装与配置 编译安装nginx需要实现安装开发包组“Development tools”和“Server Platform Development”.“Desktop Platform ...
- CCNA第三讲笔记
TCP/IP可以分为四层或者五层 应用层.传输层.网络层.网络接口层 或者 应用层.传输层.网络层.数据链路层.物理层 与OSI相比 相同点:都有层次结构 不同点:TCP/IP的应用层包含了OSI的应 ...
- apache重写
---- 本文旨在提供如何用Apache重写规则来解决一些常见的URL重写方法的问题,通过常见的实例给用户一些使用重写规则的基本方法和线索. 一.为什么需要用重写规则 ---- 网站的生命在于不断地进 ...