layui使用數(shù)據(jù)表格實(shí)現(xiàn)購(gòu)物車(chē)功能
本文實(shí)例為大家分享了layui使用數(shù)據(jù)表格實(shí)現(xiàn)購(gòu)物車(chē)功能的具體代碼,供大家參考,具體內(nèi)容如下
html部分
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui數(shù)據(jù)表格實(shí)現(xiàn)類(lèi)購(gòu)物車(chē)功能</title> <link rel="stylesheet" type="text/css" rel="external nofollow" /> <script src="http://layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script> <link rel="stylesheet" href="css/index.css" > <!--角標(biāo)--> <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數(shù)據(jù)表格實(shí)現(xiàn)類(lèi)購(gòu)物車(chē)功能</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:?jiǎn)螕糇筮吷唐妨斜砣我簧唐?,右邊?gòu)物車(chē)數(shù)據(jù)表格會(huì)渲染一條數(shù)據(jù),同時(shí)計(jì)算總數(shù),合計(jì)金額。 <br>2:購(gòu)物車(chē)數(shù)據(jù)表格,數(shù)量/單價(jià)改變,金額改變,底部合計(jì)金額,數(shù)量,也會(huì)跟隨改變 <br>3:購(gòu)物車(chē)數(shù)據(jù)表格,‘刪除',刪除當(dāng)前所選商品 </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>購(gòu)物車(chē)</p> </div> <div class="bottom-panel"> <span>總數(shù):</span><span style="color: red;margin-right: 15px" id="RechargeCount_TotalQty">---</span> <span>合計(jì)金額:</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;
/**
* 數(shù)據(jù)表格:定義表頭數(shù)據(jù)
* @type {{}}
*/
var lan = {};
lan.cpbm = "產(chǎn)品編碼";
lan.cpjm = "產(chǎn)品簡(jiǎn)碼";
lan.cpmc = "產(chǎn)品名稱(chēng)";
lan.ckjj = "參考進(jìn)價(jià)";
lan.lpbz = "禮品標(biāo)志";
lan.spbh = "商品編號(hào)";
lan.spmc = "商品名稱(chēng)";
lan.sl = "數(shù)量";
lan.dj = "單價(jià)";
lan.je = "金額";
lan.cz = "操作";
/**
* 購(gòu)物車(chē)數(shù)據(jù)
* @type {Array}
*/
var goodsData = [];
/**
* 商品數(shù)據(jù)
* @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\":\"個(gè)\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14157977930075136\",\"LAY_TABLE_INDEX\":0},{\"GoodsID\":\"20190301183528\",\"GoodsName\":\"測(cè)試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\":\"測(cè)試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\":\"盒\(zhòng)",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14130846812542976\",\"LAY_TABLE_INDEX\":3},{\"GoodsID\":\"20190126103924660\",\"GoodsName\":\"測(cè)試呀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);
/**
* 頁(yè)面加載時(shí)執(zhí)行
*/
$(function () {
console.table(GoodsData);
/**
* List1數(shù)據(jù)表格渲染(商品列表)
*/
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數(shù)據(jù)表格渲染(購(gòu)物車(chē))
*/
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 + '">')
}
})
}
});
/**
* 監(jiān)聽(tīng)商品列表'行'單擊事件
*/
table.on('row(List1)', function (obj) {
var data = obj.data;
var isNew = true;
var vKey = data.GoodsID; //產(chǎn)品編碼
//遍歷購(gòu)物車(chē),是否存在產(chǎn)品;存在,數(shù)量+1 計(jì)算金額
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;
}
}
//判斷當(dāng)前數(shù)據(jù)是否為新增數(shù)據(jù)
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);
/**
* 開(kāi)始刷新購(gòu)物車(chē)
*/
shoppingCartRefresh();
});
/**
* 監(jiān)聽(tīng)購(gòu)物車(chē)行刪除事件
*/
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);
}
}
/**
* 開(kāi)始刷新購(gòu)物車(chē)
*/
shoppingCartRefresh();
}
});
/**
* 購(gòu)物車(chē)行編輯事件
*/
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); //數(shù)量:聲明數(shù)字類(lèi)型
data[i].Price = parseFloat(data[i].Price).toFixed(2); //金額:聲明小數(shù)類(lèi)型
data[i].Money = accMul(data[i].Qty, data[i].Price,2); //計(jì)算總金額:保留2位小數(shù)
}
}
/**
* 開(kāi)始刷新購(gòu)物車(chē)
*/
shoppingCartRefresh();
});
/**
* 購(gòu)物車(chē)刷新函數(shù)
*/
function shoppingCartRefresh(){
var TotalQty = 0;
var TotalMoney = 0;
//數(shù)據(jù)表格重載
ListTable2.reload({ data: goodsData });
//計(jì)算總數(shù) 合計(jì)金額
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("總數(shù)量:"+TotalQty);
// console.log("總金額:"+TotalMoney);
$("#RechargeCount_TotalQty").html(TotalQty);
$("#RechargeCount_TotalMoney").html(TotalMoney);
}
/**
* 小數(shù)加法
* @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;
}
/**
* 小數(shù)乘法
* @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);
}
}
});
});
功能核心知識(shí):
通過(guò)一個(gè)全局?jǐn)?shù)組來(lái)存儲(chǔ),點(diǎn)擊商品后,拿到的商品信息,用數(shù)據(jù)來(lái)驅(qū)動(dòng)購(gòu)物車(chē)表格顯示。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車(chē)實(shí)例代碼
- js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車(chē)功能
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車(chē)框架(入門(mén)篇)
- 原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
- js實(shí)現(xiàn)仿購(gòu)物車(chē)加減效果
- 基于Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能
- Javascript實(shí)現(xiàn)購(gòu)物車(chē)功能的詳細(xì)代碼
相關(guān)文章
js網(wǎng)頁(yè)中的(運(yùn)行代碼)功能實(shí)現(xiàn)思路
網(wǎng)頁(yè)中的"運(yùn)行代碼"是一個(gè)很方便的功能,可以直接看到代碼的效果,感興趣的朋友不妨參考下,或許對(duì)你學(xué)習(xí)js有所幫助,好了花不多說(shuō)切入正題2013-02-02
JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話(huà)框的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)控制打開(kāi)文件另存為對(duì)話(huà)框的方法,實(shí)例分析了javascript實(shí)現(xiàn)文件另存為的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JavaScript中時(shí)間日期函數(shù)new?Date()詳解(5種獲取時(shí)間戳的函數(shù))
這篇文章主要給大家介紹了關(guān)于JavaScript中時(shí)間日期函數(shù)new?Date()的相關(guān)資料,主要講的是JS中5種獲取時(shí)間戳的函數(shù),new Date()是JavaScript中用于獲取當(dāng)前日期和時(shí)間的內(nèi)置函數(shù),需要的朋友可以參考下2024-04-04
JS判斷是否在微信瀏覽器打開(kāi)的簡(jiǎn)單實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇JS判斷是否在微信瀏覽器打開(kāi)的簡(jiǎn)單實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
使用RN Animated做一個(gè)“添加購(gòu)物車(chē)”動(dòng)畫(huà)的方法
這篇文章主要介紹了使用RN Animated做一個(gè)“添加購(gòu)物車(chē)”動(dòng)畫(huà)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

