首页
所有分类
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 相关文章推荐
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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
update(2) 索引(8) python小游戏(5) 计算机视觉(2) 备份(2) 索尼ICF-36(1) 德生2P3(1) SnakeGame(1) 贪吃蛇(2) 全局锁(1)
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
yii中widget的用法
2014/12/03 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
微信小程序从注册账号到上架（图文详解）
2019/07/17 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python KMeans聚类问题分析
2018/02/23 Python
python cs架构实现简单文件传输
2020/03/20 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python3多线程基础知识点
2019/02/19 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
高三自我鉴定怎么写
2013/10/19 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
高中生职业规划范文
2014/03/09 职场文书
住宅质量保证书
2014/04/29 职场文书
介绍信模板
2015/01/31 职场文书
python基础之停用词过滤详解
2021/04/21 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS