一、流程分析

二、代码

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. 暑假集训(4)第六弹——— 组合（poj1067）

    题意概括:上一次,你成功甩掉了fff机械兵.不过,你们也浪费了相当多的时间.fff团已经将你们团团包围,并且逐步 逼近你们的所在地.面对如此危机,你不由得悲观地想:难道这acm之路就要从此中断?虽然走 ...

  2. Windows Phone 为指定容器内的元素设置样式

    在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...

  3. SQL正常工作日上班安排

    alter proc [work] as declare @i int begin id into #restdate from dt_work where work_date in (select ...

  4. OWIN OAuth 2.0 Authorization Server

    http://www.asp.net/aspnet/overview/owin-and-katana/owin-oauth-20-authorization-server The assumption ...

  5. php截取字符串的实例代码(支持utf-8)

    分享下php中截取字符串的例子,支持utf-8格式. 1,截取字符串 <?php $string="2006年4月我又长大了一岁!"; echo substr($string ...

  6. Mindjet.MindManager“参数错误”解决办法，适用于9.0、10.0和14.0

    MindManager出14.0版本了,但是在应用个别模板的时候会提示“参数错误”,然后自动关闭. 解决办法:   如果是win7系统,可以进入C:\Users\(用户名) \AppData\Loca ...

  7. php substr,iconv_substr,mb_substr

    php进行中文字符串的截取时,会经常用到二个函数iconv_substr和mb_substr,对这二个函数应该如何选择呢?参考下本文介绍的例子就明白了. 示例代码,用到了函数substr与iconv_ ...

  8. Linux分类笔记（一）-权限管理

    Linux分类笔记(一) 权限管理 普通权限 文件的普通权限 对一个普通的文件使用ls -ll命令后,看到下面的输出内容   而对于文件权限中的每一位,又分别代表了以下的意思 文件类型又有以下几类: ...

  9. C++ 关联容器详解——从内部结构到应用

    关联容器不同于顺序容器的是:顺序容器底层用数组实现,为线性结构:关联容器在实现中,用到的非线性存储方式: 顺序容器是通过元素在容器中的位置顺序存储和访问元素,而关联容器是通过键(key)存储和读取元素 ...

  10. 宝马-中国官方网站服务站点信息爬去记录（解析json中数据）

    具体步骤: 1.进入宝马官网,查找经销商查询界面 http://www.bmw.com.cn/cn/zh/general/dealer_locator/content/dealer_locator.h ...