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

其他 2019-05-01 14:11:19 阅读次数: 0
  • 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" />
    <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">&#xe63f;</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);
            }
        }

    });

});

功能核心知识:

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

猜你喜欢

转载自blog.csdn.net/qq_37581115/article/details/88417641
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022