网上图书商城项目学习笔记-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>&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的更多相关文章

网上图书商城项目学习笔记-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 ...

随机推荐

Unix 进程通信基本概念
一:通信分为两类: 控制信息的传递: 低级通信大批量数据的传递: 高级通信二:基本的通信方式 (a)主从式通信: 通信的双方存在一种隶属关系, 其中主进程是通信过程的控制者,而从进程是通信过程的从 ...
第一章搭建Qt开发环境
第一章搭建Qt开发环境 1.到http://download.qt-project.org/archive/上下载Qt的源码包.我下载的是qt-everywhere-opensource-src-4 ...
jQueryr .on方法解析
.On() 其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来 ...
discuz 注册用户用到的几个表
通过开启记录:mysql记录日志,筛出如下信息: INSERT INTO `userclub`.pre_ucenter_members SET secques='', username='pthlp1 ...
《疯狂的android讲义第3版》读书笔记
第一章.开始启程,你的第一行android代码 1.android系统架构: 1)linux内核层:为底层硬件提供驱动,如显示驱动.音频驱动.照相机驱动.蓝牙驱动.Wifi驱动.电源管理等 2)系统运 ...
购买 CDRTools 2 正式版
联系方式: Email:396390927@qq.com QQ: 396390927 QQ群: 26326434 组件价格: ￥50元/用户,免费更新: 此物为数字商品,并经过测试完全可用,谢 ...
Django配置静态文件（CSS\js)及Django调用JS、CSS、图片等静态文件
1 新建一项目: root@python:django-admin.py startproject csstest root@python:cd csstest root@python:ls csst ...
八、mysql视图、存储过程、函数以及时间调度器
.create or replace view emp_view as select * from t4 ;给t4表创建一个名为emp_view的视图 .drop view emp_view 删除视图 ...
新的MOVE结构，和在项目中实际的感受
关于MVC/MVP的瑕疵 MVC 和 MVP是最简单,最脍炙人口的框架结构. 有一段时间, 凡事有一定规模的代码,我都会架在上面,甚至后台程序也不例外(预留出可以注册的用户交互接口,作为后台控制器). ...
EXTJS 4.2 资料控件之Window窗体自动填充页面
1.html页面代码: <div id="component" style="width:100%;height:100%"> <body&g ...

网上图书商城项目学习笔记-014购物车模块页面javascrip

网上图书商城项目学习笔记-014购物车模块页面javascrip的更多相关文章

随机推荐

热门专题