一、流程分析

二、代码

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. button按钮在IE6、7、8、9、10中处理方式并不相同[转]

    http://msdn.microsoft.com/en-us/library/ms534696%28v=vs.85%29.aspx 转自:http://my.oschina.net/fz04003/ ...

  2. bzoj 1005 HNOI2008 明明的烦恼

    这题做的我欲哭无泪啊…… 我已经没心情多说啥了…… 高精度T啊!我太弱啊!改了一天啊!还不如滚粗啊! 想好式子在写啊! 能用高精度乘单精度就不要用高精度乘高精度啊!     能用高精度除单精度就不要用 ...

  3. sublime 设置localhost 2

    最近sidebar用不了了,提示更新然后就自动卸载了: 研究了下其他方式实现: Sublime Text 2 Sublime Text 3 都可以使用: 菜单 --> Tools --> ...

  4. MYSQL 多表更新 UPDATE SET like concat('%',abc,'%');

    SQL语句为:select * from table1 where `text` like CONCAT('%',(select name from table2 where id =3),'%'); ...

  5. （转载）MS SQL Server 未公开的加密函数有哪些？

    MS SQL Server 未公开的加密函数有哪些? 以下的文章是对MS SQL Server 未公开的加密函数的具体操作,如果你对其相关的实际操作有兴趣的话,你就可以点击了. MS SQL Serv ...

  6. Spark Streaming揭秘 Day19 架构设计和运行机制

    Spark Streaming揭秘 Day19 架构设计和运行机制 今天主要讨论一些SparkStreaming设计的关键点,也算做个小结. DStream设计 首先我们可以进行一个简单的理解:DSt ...

  7. 删除_desktop.ini病毒文件

    del h:\_desktop.ini /f/s/q/a/f 强制删除只读文件/s 从当前目录及其所有子目录栓出指定文件.显示正在删除的文件名/q 制定清音状态.不提示确认删除/a 按照属性来删除

  8. 浅谈String类型

    首先,我们要知道的是String类型是一个引用类型,它的基类是Object.并且它的内容是只读的. 我们有时候经常会看到两个字符串类型,一个是“Sting”,一个是“string”.大写的String ...

  9. custom activities

    Useful Sharepoint Designer Custom Workflow Activities http://spdactivities.codeplex.com/ http://stac ...

  10. Core love JavaScript

    Core love JavaScript 前言 在 ASP.NET 团队的 Github 的主页上,有这样一个开源项目叫:"JavaScriptsServices",那么什么是 J ...