购物车前端开发（jQuery和bootstrap3）

2024-09-27 10:10:41

作为一名不在软件公司工作的软件工程师，不仅要会写后台代码(PHP/JAVA/SQL...)，还是兼顾前端工程师的工作(html/javascript/css...)。下面就来分享一个在实际工作项目中使用到的购物车的前端开发。

这里分享的仅仅是针对购物车的操作(产品数量的增加减少，删除购物车中产品项)，假设购物车中已经放有若干产品。闲话少说，先上两张效果图。

HTML代码如下：这里使用到了JQuery1.11和bootstrap3 。

<!DOCTYPE html>
<html>
<HEADER>
 <meta charset="UTF-8">
 <title>Shopping Cart</title>
 <script type="text/javascript" src="jquery-1.11.min.js"></script>
 <script type="text/javascript" src="demo.js"></script>
 <link href="bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
</HEADER>
<body class="container">
 <table id="cartTable" class="cart table table-condensed" >
 <thead>
 <tr>
 <th style="width:60px;"><label><input class="check-all check" type="checkbox" /> 全选</label></th>
 <th><label>产品型号</label></th>
 <th style="width:100px;"><label>单价</label></th>
 <th style="width:120px;"><label>数量</label></th>
 <th style="width:100px;"><label>小计</label></th>
 <th style="width:40px;"><label>操作</label></th>
 </tr>
 </thead>
 <tbody>
 <tr >
 <td ><input class="check-one check" type="checkbox" /> </td>
 <td class="goods">
  <label>Item 1</label>
 </td>
 <td class="number small-bold-red"><span>76.55</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="10" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">101</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 2</label>
 </td>
 <td class="number small-bold-red"><span>1100</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">352</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 3</label>
 </td>
 <td class="number small-bold-red"><span>1200</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">9876.55</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
 </tr>
 <tr>
 <td ><input class="check-one check" type="checkbox" /></td>
 <td class="goods">
  <label>Item 4</label>
 </td>
 <td class="number small-bold-red"><span>1400</span></td>
 <td class="input-group">
  <span class="input-group-addon minus">-</span>
  <input type="text" class="number form-control input-sm" value="1" />
  <span class="input-group-addon plus">+</span>
 </td>
 <td class="subtotal number small-bold-red">9876.55</td>
 <td class="operation"><span class="delete btn btn-xs btn-primary">删除</span></td>
 </tr>
 </tbody>
 </table>

 <div class="row">
 <div class="col-md-12 col-lg-12 col-sm-12">
 <div style="border-top:1px solid gray;padding:4px 10px;">
 <div style="margin-left:20px;" class="pull-right total">
  <label>金额合计:<span class="currency">￥</span><span id="priceTotal" class="large-bold-red">0.00</span></label>
 </div>
 <div class="pull-right">
  <label>您选择了<span id="itemCount" class="large-bold-red" style="margin:0 4px;"></span>种产品型号，共计<span id="qtyCount" class="large-bold-red" style="margin:0 4px;"></span>件</label>
 </div>
 <div class="pull-right selected" id="selected">
  <span id="selectedTotal"></span>
 </div>
 </div>
 </div>
 </div>
</body>
</html>

HTML代码主要分为两大块，TABLE部分用于显示购物车内的产品明细，在其后使用了一个DIV用于显示汇总信息。这里使用了一个技巧需要特别说明一下：

1.为元素指定一些虚假的class名称(样式表中不存在的样式名称)，方便使用JQuery的过滤器找到特定元素。如上述代码中的样式check-all / check-one / cart / subtotal

Javascript代码需要实现以下几个功能：

1.产品全选功能

2.计算产品小计（即产品单价＊购买数量）

3.用户选中购物车中的某个产品型号，需要重新计算页面下方的汇总信息，包括选中的产品型号种类、产品数量小计和金额小计

4.用户删除购物车中某个产品型号，或是修改购买数量时，需要重新计算页面下方的汇总信息。

下面就以上功能一一说明：

1.产品全选功能

$(cartTable).find(":checkbox").click(function() {
  //全选框单击
  if ($(this).hasClass("check-all")) {
   var checked = $(this).prop("checked");
   $(cartTable).find(".check-one").prop("checked", checked);
  }

  //如果手工一个一个的点选了所有勾选框，需要自动将“全选”勾上或是取消
  var items = cartTable.find("tr:gt(0)");
  $(cartTable).find(".check-all").prop("checked", items.find(":checkbox:checked").length == items.length);

  getTotal();
 });

为购物车表格中的每一样选择框绑定单击事件。在这个事件中，需要判断出用户点击的是“全选”的选择框，还是每一个产品自己的选择框，那么这里就又一次用到了上面提到的虚假样式。这里需要特别说明的是JQuery读取元素的属性通常是使用attr()方法，但是对于checkbox来说，使用attr()无法正确读取到其checked属性值。正确用法是使用prop()方法来读取。

如果用户点击了“全选”，那么所有的选择框都应该被选中，这一点很容易考虑到。但是有一个细节需要注意，就是在用户手工一个一个的将所有产品选中时，程序应该将“全选”框也设为选中状态，或是在全部选中的状态下，用户手工取消了某一个产品的选中状态，那么程序也应该将“全选”框设为未选中状态。

最后一行代码是在用户选择完毕后，需要重新计算购物车的汇总信息。

2.产品小计功能代码：

 /*
  * 计算购物车中每一个产品行的金额小计
  *
  * 参数 row 购物车表格中的行元素tr
  *
  */
 function getSubTotal(row) {
 var price = parseFloat($(row).find("span:first").text()); //获取单价
  var qty = parseInt($(row).find(":text").val()); //获取数量
  var result = price * qty; //计算金额小计
  $(row).find(".subtotal").text(result.toFixed(2)); //将计算好的金额小计写入到“小计”栏位中
 };

这个函数需要传入一个参数，即用于显示购物车内容的tr元素。
在显示购物车内容的表格中，每一个产品单价使用一个span元素包裹，且是这一行中的第一个span元素，使用JQuery过滤器$(row).find("span:first")即可以定位到产品单价，使用其text函数读取内容，并使用parseFloat将读取到的字符串转为浮点数。
购买数量，因为用户可能会去改变，所以使用input来展现。同事，使用如下过滤器即可定位到数量
$(row).find(":text")

并使用parseInt将其转为整数。在计算好单个产品金额小计之后，就需要将其写入到“小计”栏位中，使用toFixed方法，将数字格式化为带有两位小数样式。

3.购物车金额汇总

 /*
  * 计算购物车中产品的累计金额
  *
  *
  */
 function getTotal() {
 var qtyTotal = 0;
  var itemCount = 0;
  var priceTotal = 0;
  $(cartTable).find("tr:gt(0)").each(function() {
  if ($(this).find(":checkbox").prop("checked") == true) { //如果选中
    itemCount++; //累加产品品种数量
    qtyTotal += parseInt($(this).find(":text").val()); //累计产品购买数量
    priceTotal += parseFloat($(this).find(".subtotal").text()); //累计产品金额
   }
  });    $("#itemCount").text(itemCount);
  $("#qtyCount").text(qtyTotal);
 $("#priceTotal").text(priceTotal.toFixed(2));
 };

计算购物车汇总信息时，应该是遍历购物车中所有的行，将每一行的小计和数量分别进行累加即可。这里使用一个技巧来获取购物车表格中的所有行$(cartTable).find("tr:gt(0)")

这里使用的tr:gt(0)是表示选择表格中所有的tr元素并且索引是大于0的（即除去第一个tr元素），这是为什么呢？我们回头看一下HTML代码就不难发现，第一个tr元素是表格标题头，不包含任何业务数据，所以在遍历时，应该除去这一个tr元素。

4.用户删除产品，或是修改购买数量时重新计算产品小计和汇总信息

//为数量调整的＋ －号提供单击事件，并重新计算产品小计
 /*
  * 为购物车中每一行绑定单击事件，以及每行中的输入框绑定键盘事件
  * 根据触发事件的元素执行不同动作
  * 增加数量
  * 减少数量
  * 删除产品
  *
  */
 $(cartTable).find("tr:gt(0)").each(function() {
 var input = $(this).find(":text");
 //为数量输入框添加事件，计算金额小计，并更新总计
 $(input).keyup(function() {
 var val = parseInt($(this).val());
 if (isNaN(val) || (val < 1)) { $(this).val("1"); }
  getSubTotal($(this).parent().parent()); //tr element
  getTotal();
 });

 //为数量调整按钮、删除添加单击事件，计算金额小计，并更新总计
 $(this).click(function() {
 var val = parseInt($(input).val());
 if (isNaN(val) || (val < 1)) { val = 1; }

 if ($(window.event.srcElement).hasClass("minus")) {
   if (val > 1) val--;
   input.val(val);
   getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("plus")) {
   if (val < 9999) val++;
  input.val(val);
 getSubTotal(this);
  }
  else if ($(window.event.srcElement).hasClass("delete")) {
   if (confirm("确定要从购物车中删除此产品？")) {
    $(this).remove();
 }
  }
   getTotal();
 });

我在这里并不是一一对“增加”、“减少”和“删除”按钮进行事件绑定，而是将单击事件统一绑定在TR行上，再对触发单击事件的元素进行判断，进而决定执行何种操作。

点击“＋”或是“－”按钮时，程序会将数量加一或是减一，并重新计算产品小计和汇总信息。

同时，还为数量输入框绑定了键盘事件，在输入框内每按下一次键盘，都会触发该事件，重新计算产品小计和汇总信息。

至此，购物车的前端开发，算是告一段落。

小伙伴们可以使用以下链接获取源码：https://github.com/chris-mao/ShoppingCart.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

AngularJs中Bootstrap3 datetimepicker使用实例

关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div
AngularJS动态菜单操作指令

前言在我们创建一个angularJS应用的时候,菜单往往往是不可或缺的元素之一.也许在我们静态菜单的时候不会发现在指令中操作菜单收缩.折叠展开没有任何问题,因为我们在操作之前,页面元素渲染已经完成,所以在指令里面通过element查找目标元素可以成功.但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染,我们会发现本来在静态写好的指令操作,在转变为动态数据加载之后,怎么也没法查找到想要的目标元素. 遇到如此问题,开始觉得好奇葩的,当然这也是吐槽一下,还是得好好解决问题的,痛定失痛
实例详解AngularJS实现无限级联动菜单

多级联动菜单是常见的前端组件,比如省份-城市联动.高校-学院-专业联动等等.场景虽然常见,但仔细分析起来要实现一个通用的无限分级联动菜单却不一定像想象的那么简单.比如,我们需要考虑子菜单的加载是同步的还是异步的?对于初始值的回填发生在前端还是后端?如果异步加载,是否对于后端API的返回格式有严格的定义?是否容易实现同步.异步共存?是否可以灵活的支持各类依赖关系?菜单中是否有空值选项?--一系列的问题都需要精心处理. 带着这些需求搜索了一圈,不太出乎意料,并没有能在AngularJS的生态中找到一
Bootstrap3制作搜索框样式的方法

Bootstrap3中的很多样式,都是需要我们进行摸索着学习的,在制作类似百度的素搜索框时,一开始会不知道怎么做,其实很简单,利用内联图标方式就可以实现 <div class="input-group"> <input type="text" class="form-control input-lg"><span class="input-group-addon btn btn-primary"&
Bootstrap3 datetimepicker控件使用实例

Bootstrap3 日期+时间选择控件的使用方法,供大家参考,具体内容如下 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:https://github.com/moment/moment datetimepi
Bootstrap3 多选和单选框(checkbox)

多选框(checkbox)用于选择列表中的一个或多个选项,而单选框(radio)用于从多个选项中只选择一个. 设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> 标签,如果也希望将悬停于上方的鼠标设置为"禁止点击"的样式,请将 .disabled 类赋予 .radio..radio-inline..checkbox..checkbox-inline 或 <fieldset>. 默认外观(堆叠在一起) &
AngularJS实现树形结构(ztree)菜单示例代码

树形结构树形结构有多种形式和实现方式,zTree可以说得上是一种比较简洁又美观的且实现起来也相对简单.zTree是一个依靠jQuery实现的多功能"树插件".它最大的优点是配置灵活,只要id与pid的值相同就可形成一个简单的父子结构.再加上免费开源,使用zTree的人越来越多. 效果图如下首先你需要知道AngularJS的双向数据绑定是什么才可以更好的理解下面的代码,想了很久才想出用下面的代码来实现左侧菜单树形结构要实现上面的功能你需要操作如下步骤: 在HTML标签内添加ng-a
AngularJS折叠菜单实现方法示例

本文实例讲述了AngularJS折叠菜单实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.css&quo
angularjs+bootstrap菜单的使用示例代码

需求背景: 使用yo angular生成的项目默认主页是这样的: body部分涉及具体的业务内容,后续研究.这里主要研究菜单项.页眉的处理. 页脚处理: 自动生成的项目中,菜单和页脚设置都是在index.html文件中实现的. # index.html <div class="footer"> <div class="container"> <p><span class="glyphicon glyphicon-h
AngularJS+Bootstrap3多级导航菜单的实现代码

将介绍如何用AngularJS构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,AngularJS能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 本文将介绍如何实现多限级导航菜单. 目录 1.静态多级菜单实现 2.动态多级菜单实现 1. 静态多级

购物车前端开发（jQuery和bootstrap3）

相关推荐

随机推荐