layui使用數據表格實現購物車功能

2024-05-06 16:53:41

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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" rel="external nofollow" >  <!--角標-->  <link rel="shortcut icon" href="https://www.kaisir.cn/icon/favicon.ico" rel="external nofollow" >  <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"              _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);      }    }   }); });

功能核心知識：

通過一個全局數組來存儲，點擊商品后，拿到的商品信息，用數據來驅動購物車表格顯示。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。

注：相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。

上一篇：Bootstrap實現省市區三級聯動(親測可用)

下一篇：基于layui實現高級搜索（篩選）功能