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

2019-11-19 11:07:23

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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实现数据表格点击搜索功能