首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

layui使用数据表格实现购物车功能

Posted in Javascript onJuly 26, 2019

本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码，供大家参考，具体内容如下

html部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>layui数据表格实现类购物车功能</title>
 <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202" rel="external nofollow" />
 <script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script>
 <link rel="stylesheet" href="css/index.css" >
 <!--角标-->
 <link rel="shortcut icon" href=https://www.kaisir.cn/icon/favicon.ico >
 <script src="js/index.js"></script>
</head>
<body>
 
<div id="guide_panel">
 <blockquote class="layui-elem-quote">layui数据表格实现类购物车功能</blockquote>
 <ul class="layui-timeline">
 <li class="layui-timeline-item">
  <i class="layui-icon layui-timeline-axis"></i>
  <div class="layui-timeline-content layui-text">
  <h3 class="layui-timeline-title">使用方法</h3>
  <p>
   <br>1：单击左边商品列表任一商品，右边购物车数据表格会渲染一条数据，同时计算总数，合计金额。
   <br>2：购物车数据表格，数量/单价改变，金额改变，底部合计金额，数量，也会跟随改变
   <br>3：购物车数据表格，‘删除'，删除当前所选商品
  </p>
  </div>
 </li>
 </ul>
</div>
 <div id="row_panel">
 <div class="table-panel">
  <table id="List1" lay-filter="List1"></table>
  <p>商品列表</p>
 </div>
 <div class="table-panel">
  <table id="List2" lay-filter="List2"></table>
  <p>购物车</p>
 </div>
 <div class="bottom-panel">
  <span>总数:</span><span style="color: red;margin-right: 15px" id="RechargeCount_TotalQty">---</span>
  <span>合计金额:</span><span style="color:red;margin-right: 20px" id="RechargeCount_TotalMoney">---</span>
 </div>
 </div>
</body>
</html>

css部分

*{
 margin: 0;
 padding: 0;
}
#guide_panel{
 width: 98%;
 margin: 0 auto;
}
#row_panel{
 width: 98%;
 height: 720px;
 margin: 0 auto;
 /*border: solid 1px red;*/
}
#row_panel .table-panel{
 width: 50%;
 height: 500px;
 float: left;
 text-align: center;
}
#row_panel .table-panel p{
 color:#BBBBBB;
}
#row_panel .bottom-panel{
 width: 100%;
 height: 40px;
 background: #F0F0F0;
 float: left;
 margin-top: 20px;
 text-align: right;
}
#row_panel .bottom-panel span{
 line-height: 40px;
 font-size: 18px;
}

js部分

layui.use(['layer', 'form', 'element', 'jquery', 'table', 'laydate'], function () {
 var form = layui.form, element = layui.element, $ = layui.$, layer = layui.layer,
 table = layui.table, laydate = layui.laydate;
 /**
 * 数据表格:定义表头数据
 * @type {{}}
 */
 var lan = {};
 lan.cpbm = "产品编码";
 lan.cpjm = "产品简码";
 lan.cpmc = "产品名称";
 lan.ckjj = "参考进价";
 lan.lpbz = "礼品标志";
 lan.spbh = "商品编号";
 lan.spmc = "商品名称";
 lan.sl = "数量";
 lan.dj = "单价";
 lan.je = "金额";
 lan.cz = "操作";
 /**
 * 购物车数据
 * @type {Array}
 */
 var goodsData = [];
 /**
 * 商品数据
 * @type {string}
 */
 var GoodsDataStr = "[{\"GoodsID\":\"20190308131925\",\"GoodsName\":\"123456\",\"NameCode\":\"123456\",\"GoodsClass\":\"13659603513393152\",\"GoodsType\":1,\"Price\":20,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0.8,\"IsDiscount\":1,\"Remark\":null,\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190308131956,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"个\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14157977930075136\",\"LAY_TABLE_INDEX\":0},{\"GoodsID\":\"20190301183528\",\"GoodsName\":\"测试2\",\"NameCode\":\"CS2\",\"GoodsClass\":\"14148378555485184\",\"GoodsType\":1,\"Price\":60,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190301183538,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"次\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14148379235683328\",\"LAY_TABLE_INDEX\":1},{\"GoodsID\":\"20190301183516\",\"GoodsName\":\"测试1\",\"NameCode\":\"CS1\",\"GoodsClass\":\"14148378482019328\",\"GoodsType\":1,\"Price\":50,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190301183522,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"次\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14148378983274496\",\"LAY_TABLE_INDEX\":2},{\"GoodsID\":\"6914068013626\",\"GoodsName\":\"纸巾\",\"NameCode\":\"zj\",\"GoodsClass\":\"13819788947571712\",\"GoodsType\":1,\"Price\":5,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":1,\"PointType\":0.1,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":\"%3Cp%3Enull%3C/p%3E\",\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190217092044,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"盒\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14130846812542976\",\"LAY_TABLE_INDEX\":3},{\"GoodsID\":\"20190126103924660\",\"GoodsName\":\"测试呀1\",\"NameCode\":\"CSY1\",\"GoodsClass\":\"13659654677299200\",\"GoodsType\":1,\"Price\":20,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":\"/FileSys/MemPhoto/198/20190126103959902.jpg\",\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":\"\",\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190126103959,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"次\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14099782024565760\",\"LAY_TABLE_INDEX\":4},{\"GoodsID\":\"20190124202652\",\"GoodsName\":\"是是是\",\"NameCode\":\"SSS\",\"GoodsClass\":\"13659603389480960\",\"GoodsType\":1,\"Price\":11,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":1,\"Images\":null,\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190124202657,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"1\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14097527869279232\",\"LAY_TABLE_INDEX\":5},{\"GoodsID\":\"699\",\"GoodsName\":\"自助烤肉\",\"NameCode\":\"ZZKR\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":50,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":50,\"Images\":\"/FileSys/MemPhoto/198/20190114153729870.jpg\",\"IsPoint\":1,\"PointType\":800,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190114153730,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":null,\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14083087561366528\",\"LAY_TABLE_INDEX\":6},{\"GoodsID\":\"20190114153056\",\"GoodsName\":\"积分衣服\",\"NameCode\":\"JFYF\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":0,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":\"/FileSys/GoodsIMG/198/20190114154132974.png\",\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":\"%3Cp%3Enull%3C/p%3E\",\"IsDelete\":0,\"IsGift\":1,\"ExchangePoint\":500,\"CreateTime\":20190114153221,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"1\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14083082487470080\",\"LAY_TABLE_INDEX\":7},{\"GoodsID\":\"20190114152247\",\"GoodsName\":\"积分裤子\",\"NameCode\":\"JFKZ\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":0,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":1,\"PointType\":800,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":1,\"ExchangePoint\":0,\"CreateTime\":20190114152321,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"1\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14083073653020672\",\"LAY_TABLE_INDEX\":8},{\"GoodsID\":\"20190114151536\",\"GoodsName\":\"裤子\",\"NameCode\":\"KZ\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":0,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":null,\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":null,\"IsDelete\":0,\"IsGift\":1,\"ExchangePoint\":500,\"CreateTime\":20190114151658,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"1\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14083067377571840\",\"LAY_TABLE_INDEX\":9}]";
 var GoodsData = JSON.parse(GoodsDataStr);
 /**
 * 页面加载时执行
 */
 $(function () {
 console.table(GoodsData);
 
 /**
  * List1数据表格渲染(商品列表)
  */
 var ListTable1 = table.render({
  data:GoodsData,
  elem: '#List1',
  cellMinWidth: 95,
  //height: 'full-190',
  height: '460',
  minheight:430,
  page: true,
  limit: 10,
  limits: [10, 20, 30, 40],
  done: function (res) {
  if (res.rows && res.rows.length == 1) {
   var data = res.rows[0];
 
   GoodsList_onDblClickRow(data);
  }
  },
  cols: [
  [
   { field: 'GoodsID', title: lan.cpbm, align: 'left' },
   { field: 'NameCode', title: lan.cpjm, align: 'left' },
   { field: 'GoodsName', title: lan.cpmc, align: 'left' },
   {
   field: 'XPrice', title: lan.ckjj, align: 'right', templet: function (d) {
    return "<span style='color:red'>￥" + d.XPrice + "</span>";
   }
   },
   {
   field: 'IsGift', title: lan.lpbz, align: 'center', templet: function (d) {
    var _fm = '<div class="padding_top4 padding_left5">';
    _fm += d.IsGift == 1 ? '<i class="layui-icon layui-icon-ok" title=' + lan.lp + '></i>' : '<i class="layui-icon layui-icon-close" title=' + lan.flp + '></i>';
    _fm += "</div>";
    return _fm;
   }
   }
  ]
  ]
 });
 
 /**
  * List2数据表格渲染(购物车)
  */
 var ListTable2 = table.render({
  data:goodsData,
  elem: '#List2',
  cellMinWidth: 95,
  //height: 'full-190',
  height: '460',
  minheight:430,
  page: true,
  limit: 10,
  limits: [10, 20, 30, 40],
  cols: [
  [
   { field: 'GoodsID', title: lan.spbh },
   { field: 'GoodsName', title: lan.spmc },
   { field: 'Qty', title: lan.sl, edit: 'text' },
   { field: 'Price', title: lan.dj, edit: 'text' },
   { field: 'Money', title: lan.je },
   {
   title: lan.cz, align: "center", fixed: 'right', templet: function (d) {
    var html = '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delet">删除</a> ';
    return html;
   }
   }
  ]
  ],
  done: function (res) {
  $("#List2").siblings().find("td").each(function () {
   if ($(this).attr("data-edit") == 'text') {
   var num = $(this).find("div").text();
   $(this).append('<input class="layui-input layui-table-edit" value="' + num + '">')
   }
  })
  }
 
 });
 
 /**
  * 监听商品列表'行'单击事件
  */
 table.on('row(List1)', function (obj) {
  var data = obj.data;
  var isNew = true;
  var vKey = data.GoodsID; //产品编码
  //遍历购物车，是否存在产品；存在，数量+1 计算金额
  for (var i = 0; i < goodsData.length; i++) {
  var tRow = goodsData[i];
  if (vKey == tRow.GoodsID) {
   tRow.Qty = parseInt(tRow.Qty) + 1;
   tRow.Money = accMul(tRow.Qty, tRow.Price,2);
   isNew = false;
   break;
  }
  }
  //判断当前数据是否为新增数据
  if (isNew) {
  var tmpRow = {};
  tmpRow.Id = data.Id;
  tmpRow.GoodsID = data.GoodsID;
  tmpRow.GoodsName = data.GoodsName;
  tmpRow.Price = data.XPrice;
  tmpRow.Qty = 1;
  tmpRow.Money =(data.XPrice).toFixed(2);
  tmpRow.SalesCode = "";
  goodsData.push(tmpRow);
  }
  //console.log(goodsData);
 
  /**
  * 开始刷新购物车
  */
  shoppingCartRefresh();
 });
 
 
 /**
  * 监听购物车行删除事件
  */
 table.on('tool(List2)', function (obj, index) {
  var data = obj.data;
  if (obj.event === 'delet') {
  for (var i = 0; i < goodsData.length; i++) {
   var gd = goodsData[i];
   if (data.GoodsID == gd.GoodsID) {
   goodsData.splice(i, 1);
   }
  }
  /**
   * 开始刷新购物车
   */
  shoppingCartRefresh();
  }
 });
 
 /**
  * 购物车行编辑事件
  */
 table.on('edit(List2)', function (obj) {
  var data = goodsData;
  for (var i = 0; i < data.length; i++) {
  if (obj.data.Id == data[i].Id) {
   if (isNaN(data[i].Qty) || data[i].Qty < 0) {
   data[i].Qty = 0;
   }
   if (isNaN(data[i].Price) || data[i].Price < 0) {
   data[i].Price = 0;
   }
   data[i].Qty = Number(data[i].Qty); //数量:声明数字类型
   data[i].Price = parseFloat(data[i].Price).toFixed(2); //金额:声明小数类型
   data[i].Money = accMul(data[i].Qty, data[i].Price,2); //计算总金额:保留2位小数
  }
  }
  /**
  * 开始刷新购物车
  */
  shoppingCartRefresh();
 });
 
 
 /**
  * 购物车刷新函数
  */
 function shoppingCartRefresh(){
  var TotalQty = 0;
  var TotalMoney = 0;
  //数据表格重载
  ListTable2.reload({ data: goodsData });
  //计算总数 合计金额
  for (var i = 0; i < goodsData.length; i++) {
  TotalQty = accAdd(TotalQty, goodsData[i].Qty);
  TotalMoney = (accAdd(TotalMoney, parseFloat(goodsData[i].Money))).toFixed(2);
  }
  // console.log("总数量:"+TotalQty);
  // console.log("总金额:"+TotalMoney);
  $("#RechargeCount_TotalQty").html(TotalQty);
  $("#RechargeCount_TotalMoney").html(TotalMoney);
 }
 
 /**
  * 小数加法
  * @param arg1
  * @param arg2
  * @returns {number}
  */
 function accAdd(arg1,arg2){
  var r1,r2,m;
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
  m=Math.pow(10,Math.max(r1,r2));
  return (arg1*m+arg2*m)/m;
 }
 /**
  * 小数乘法
  * @param arg1
  * @param arg2
  * @param fix
  * @returns {*}
  */
 function accMul(arg1,arg2,fix) {
  if(!parseInt(fix)==fix)
  {
  return;
  }
  var m=0,s1=arg1.toString(),s2=arg2.toString();
  try{m+=s1.split(".")[1].length}catch(e){}
  try{m+=s2.split(".")[1].length}catch(e){}
  if(m>fix){
  return (Math.round(Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m-fix))/Math.pow(10,fix));
  }else if(m<=fix){
  return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(fix);
  }else{
  return (arg1*arg2).toFixed(fix);
  }
 }
 
 });
 
});

功能核心知识：

通过一个全局数组来存储，点击商品后，拿到的商品信息，用数据来驱动购物车表格显示。

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

layui使用数据表格实现购物车功能

- Author -

爱折腾的程序员

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
js原型链与继承解析（初体验）
May 09 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
微信小程序之GET请求的实例详解
Sep 29 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
layui实现数据表格点击搜索功能
Mar 26 #Javascript
vue eslint简要配置教程详解
Jul 26 #Javascript
vue移动端城市三级联动组件使用详解
Jul 26 #Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 #Javascript
layui实现下拉框三级联动
Jul 26 #Javascript
layui添加动态菜单与选项卡
Jul 26 #Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 #Javascript
Django(9) Switch(1) filter(1) TextInputLayout(1) Spring JPA(1) Spring Bean(1) EditText(1) openEuler(1) Selenium(1) Tsmoothie(1)
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
关于拼配咖啡，你要知道
2021/03/03 咖啡文化
PHP 文件上传功能实现代码
2009/06/24 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
纯JS实现轮播图
2017/02/22 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python实现三次样条插值
2018/12/17 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
django 类视图的使用方法详解
2019/07/24 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Marriott中国：万豪国际酒店查询预订
2016/09/02 全球购物
Tiqets荷兰：出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
外语系毕业生求职自荐信
2014/04/12 职场文书
服务理念标语
2014/06/18 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
典型事迹材料范文
2014/12/29 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python