一、流程分析

二、代码

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>&yen;<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">&yen;<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">&yen;<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的更多相关文章

  1. 网上图书商城项目学习笔记-011Book模块查询(分页)

    一.流程分析 1.图书模块 2.分布分析 二.代码 1.view层 1)list.jsp <%@ page language="java" import="java ...

  2. 网上图书商城项目学习笔记-012BOOK模块查询2

    一.分析 > 按图名查询(模糊)(分页)> 按作者查询(分页)> 按出版社查询(分页)> 按id查询> 多条件组合查询(分页) 二.代码 1.view层 (1)gj.js ...

  3. 网上图书商城项目学习笔记-037工具类之BaseServlet及统一中文编码

    1.统一中文编码分析 tomcat默认esetISO-8859-1编码,在servlet中,可能通过request的setCharacterEncoding(charset)和response.set ...

  4. 网上图书商城项目学习笔记-036工具类之CommonUtils及日期转换器

    1.CommonUtils.java package cn.itcast.commons; import java.util.Map; import java.util.UUID; import or ...

  5. 网上图书商城项目学习笔记-035工具类之JdbcUtils及TxQueryRunner及C3P0配置

    事务就是保证多个操作在同一个connection,TxQueryRunner通过JdbcUtils获取连接,而JdbcUtils通过ThreadLocal<Connection>确保了不同 ...

  6. 【Java EE 学习 25 上】【网上图书商城项目实战】

    一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...

  7. 基于SSH的网上图书商城-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 技术:Java:JSP:JDBC,struts2,spring,hibernate数据库: mysqlweb ...

  8. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  9. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

随机推荐

  1. Git 的简单使用

    一直在使用Git,仅限于简单的使用,但还是记不住几个简单.在这边总结一下,加深印象,也方便查找. 安装Git 平常主要在windows和ubuntu上工作,就以windows为例,Linux和Mac平 ...

  2. class不想被复制的两个做法

    1,当一个class不想被复制的时候,可以将copy构造函数和copy assignment操作符声明为private.(只声明不定义,因此可以不指定函数参数) 2,或者,继承一个专门为了阻止copy ...

  3. 关键字 const

    如果关键字出现在星号左边,表示被指物是常量: 如果出现在星号右边,表示指针本身是常量: 如果出现在星号两边,表示被指物和指针都是常量. void f1(const Widget* pw); //f1和 ...

  4. Poj 3117 World Cup

    1.Link: http://poj.org/problem?id=3117 2.Content: World Cup Time Limit: 1000MS   Memory Limit: 65536 ...

  5. MySQL学习笔记之数据存储类型

    说明:本文是作者对MySQL数据库数据存储类型的小小总结. Numeric Type (数字类型) 1.TINYINT.SMALLINT.MEDIUMINT.INT.BIGINT主要根据存储字节长度不 ...

  6. jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】

    1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type ...

  7. Android SDK离线安装方法详解(加速安装) 转

    AndroidSDK在国内下载一直很慢··有时候通宵都下不了一点点,最后只有选择离线安装,现在发出离线安装地址和方法,希望对大家有帮助! 离线安装包下载地址:http://dl.vmall.com/c ...

  8. SYN, FIN, ACK, PSH, RST, URG

    在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 它们的含义是: SYN表示建立连 ...

  9. shell调用sqlplus批量执行sql文件

    在最近的工作中,经常需要批量执行一些DML, DDL, PL/SQL语句或导入一些Function, Procedure.因为support的国家比较多,常常需要一个登陆到一个国家的数据库上执行完成后 ...

  10. oracle 将科学计数法数据转换为非科学计数法数据

    oracle 自定义函数: CREATE OR REPLACE FUNCTION ConvertNumeric(rawData VARCHAR2) --用于返回转换科学计算法dhx RETURN VA ...