本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码，供大家参考，具体内容如下
html部分
layui数据表格实现类购物车功能 layui数据表格实现类购物车功能
-
使用方法
1：单击左边商品列表任一商品，右边购物车数据表格会渲染一条数据，同时计算总数，合计金额。
2：购物车数据表格，数量/单价改变，金额改变，底部合计金额，数量，也会跟随改变
3：购物车数据表格，‘删除'，删除当前所选商品
商品列表
购物车
总数:--- 合计金额:---css部分
*{
margin: 0;
padding: 0;
}
#guide_panel{
width: 98%;
margin: 0 auto;
}
#row_panel{
width: 98%;
height: 720px;
margin: 0 auto;
}
#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;
var lan = {};
lan.cpbm = "产品编码";
lan.cpjm = "产品简码";
lan.cpmc = "产品名称";
lan.ckjj = "参考进价";
lan.lpbz = "礼品标志";
lan.spbh = "商品编号";
lan.spmc = "商品名称";
lan.sl = "数量";
lan.dj = "单价";
lan.je = "金额";
lan.cz = "操作";
var goodsData = [];
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);
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 "￥" + d.XPrice + "";
}
},
{
field: 'IsGift', title: lan.lpbz, align: 'center', templet: function (d) {
var _fm = '';
_fm += d.IsGift == 1 ? '' : '';
_fm += "";
return _fm;
}
}
]
]
});
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 = '删除 ';
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('')
}
})
}
});
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);
}
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;
}
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);
}
}
});
});
功能核心知识：
通过一个全局数组来存储，点击商品后，拿到的商品信息，用数据来驱动购物车表格显示。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
