The examples in this article share with you the specific code of Layui using data tables to implement shopping cart functions for your reference. The specific content is as follows
html part
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layuiData tables realize shopping cart function</title> <link rel="stylesheet" type="text/css" href="//layui./layui/css/?v=201801090202" rel="external nofollow" /> <script src="//layui./layui/?v=201801090202"></script> <link rel="stylesheet" href="css/" > <!--Corner marker--> <link rel="shortcut icon" href=/icon/ > <script src="js/"></script> </head> <body> <div > <blockquote class="layui-elem-quote">layuiData tables realize shopping cart function</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">How to use</h3> <p> <br>1：Click any item on the left product list，The shopping cart data table on the right will render a data，Calculate the total number simultaneously，Total amount。 <br>2：Shopping cart data form，quantity/Changes in unit price，Change of amount，底部Total amount，quantity，Will follow changes <br>3：Shopping cart data form，‘delete'，delete当前所选商品 </p> </div> </li> </ul> </div> <div > <div class="table-panel"> <table lay-filter="List1"></table> <p>Product List</p> </div> <div class="table-panel"> <table lay-filter="List2"></table> <p>Shopping cart</p> </div> <div class="bottom-panel"> <span>total:</span><span style="color: red;margin-right: 15px" >---</span> <span>Total amount:</span><span style="color:red;margin-right: 20px" >---</span> </div> </div> </body> </html>
CSS part
*{
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 part
(['layer', 'form', 'element', 'jquery', 'table', 'laydate'], function () {
var form = , element = , $ = layui.$, layer = ,
table = , laydate = ;
/**
* Data table: define header data
* @type {{}}
*/
var lan = {};
= "Product Code";
= "Product Code";
= "Product Name";
= "Reference Purchase";
= "Gift Logo";
= "Product Number";
= "Product Name";
= "quantity";
= "unit price";
= "Amount";
= "operate";
/**
* Shopping cart data
* @type {Array}
*/
var goodsData = [];
/**
* Product data
* @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\":\"indivual\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14157977930075136\",\"LAY_TABLE_INDEX\":0},{\"GoodsID\":\"20190301183528\",\"GoodsName\":\"Test 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\":\"Second-rate\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14148379235683328\",\"LAY_TABLE_INDEX\":1},{\"GoodsID\":\"20190301183516\",\"GoodsName\":\"Test 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\":\"Second-rate\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14148378983274496\",\"LAY_TABLE_INDEX\":2},{\"GoodsID\":\"6914068013626\",\"GoodsName\":\"tissue\",\"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\":\"box\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14130846812542976\",\"LAY_TABLE_INDEX\":3},{\"GoodsID\":\"20190126103924660\",\"GoodsName\":\"Test 1\",\"NameCode\":\"CSY1\",\"GoodsClass\":\"13659654677299200\",\"GoodsType\":1,\"Price\":20,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":\"/FileSys/MemPhoto/198/\",\"IsPoint\":0,\"PointType\":0,\"MinDiscount\":0,\"IsDiscount\":0,\"Remark\":\"\",\"IsDelete\":0,\"IsGift\":0,\"ExchangePoint\":0,\"CreateTime\":20190126103959,\"CompID\":198,\"ShopID\":\"237\",\"MasterID\":\"237\",\"MeasureUnit\":\"Second-rate\",\"Specials\":0,\"IsShelf\":0,\"FreightTemplateID\":null,\"Id\":\"14099782024565760\",\"LAY_TABLE_INDEX\":4},{\"GoodsID\":\"20190124202652\",\"GoodsName\":\"Yes Yes Yes",\"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\":\"Self-Buffet Barbecue",\"NameCode\":\"ZZKR\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":50,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":50,\"Images\":\"/FileSys/MemPhoto/198/\",\"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\":\"Points Clothes\",\"NameCode\":\"JFYF\",\"GoodsClass\":\"13819785158099968\",\"GoodsType\":1,\"Price\":0,\"PriceUnit\":0,\"PriceNum\":0,\"XPrice\":0,\"Images\":\"/FileSys/GoodsIMG/198/\",\"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\":\"Points Pants",\"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\":\"Pants\",\"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 = (GoodsDataStr);
/**
* Execute when the page is loaded
*/
$(function () {
(GoodsData);
/**
* List1 data table rendering (product list)
*/
var ListTable1 = ({
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 ( && == 1) {
var data = [0];
GoodsList_onDblClickRow(data);
}
},
cols: [
[
{ field: 'GoodsID', title: , align: 'left' },
{ field: 'NameCode', title: , align: 'left' },
{ field: 'GoodsName', title: , align: 'left' },
{
field: 'XPrice', title: , align: 'right', templet: function (d) {
return "<span style='color:red'>￥" + + "</span>";
}
},
{
field: 'IsGift', title: , align: 'center', templet: function (d) {
var _fm = '<div class="padding_top4 padding_left5">';
_fm += == 1 ? '<i class="layui-icon layui-icon-ok" title=' + + '></i>' : '<i class="layui-icon layui-icon-close" title=' + + '></i>';
_fm += "</div>";
return _fm;
}
}
]
]
});
/**
* List2 data table rendering (shopping cart)
*/
var ListTable2 = ({
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: },
{ field: 'GoodsName', title: },
{ field: 'Qty', title: , edit: 'text' },
{ field: 'Price', title: , edit: 'text' },
{ field: 'Money', title: },
{
title: , align: "center", fixed: 'right', templet: function (d) {
var html = '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delet">delete</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 + '">')
}
})
}
});
/**
* Listen to the 'row' click event
*/
('row(List1)', function (obj) {
var data = ;
var isNew = true;
var vKey = ; //Product Code //Travel over the shopping cart, whether there is a product; exist, quantity +1 Calculate the amount for (var i = 0; i < ; i++) {
var tRow = goodsData[i];
if (vKey == ) {
= parseInt() + 1;
= accMul(, ,2);
isNew = false;
break;
}
}
//Judge whether the current data is new data if (isNew) {
var tmpRow = {};
= ;
= ;
= ;
= ;
= 1;
=().toFixed(2);
= "";
(tmpRow);
}
//(goodsData);
/**
* Start refreshing the cart
*/
shoppingCartRefresh();
});
/**
* Listen to shopping cart line deletion event
*/
('tool(List2)', function (obj, index) {
var data = ;
if ( === 'delet') {
for (var i = 0; i < ; i++) {
var gd = goodsData[i];
if ( == ) {
(i, 1);
}
}
/**
* Start refreshing the cart
*/
shoppingCartRefresh();
}
});
/**
* Shopping cart line editing event
*/
('edit(List2)', function (obj) {
var data = goodsData;
for (var i = 0; i < ; i++) {
if ( == 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); //Quantity: Declare the numeric type data[i].Price = parseFloat(data[i].Price).toFixed(2); //Amount: Declare the decimal type data[i].Money = accMul(data[i].Qty, data[i].Price,2); //Calculate the total amount: keep 2 decimal places }
}
/**
* Start refreshing the cart
*/
shoppingCartRefresh();
});
/**
* Shopping cart refresh function
*/
function shoppingCartRefresh(){
var TotalQty = 0;
var TotalMoney = 0;
//Data table overload ({ data: goodsData });
//Calculate the total amount for (var i = 0; i < ; i++) {
TotalQty = accAdd(TotalQty, goodsData[i].Qty);
TotalMoney = (accAdd(TotalMoney, parseFloat(goodsData[i].Money))).toFixed(2);
}
// ("Total Quantity:"+TotalQty); // ("Total Amount:"+TotalMoney); $("#RechargeCount_TotalQty").html(TotalQty);
$("#RechargeCount_TotalMoney").html(TotalMoney);
}
/**
* Addition of decimals
* @param arg1
* @param arg2
* @returns {number}
*/
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=().split(".")[1].length}catch(e){r1=0}
try{r2=().split(".")[1].length}catch(e){r2=0}
m=(10,(r1,r2));
return (arg1*m+arg2*m)/m;
}
/**
* Decimal multiplication
* @param arg1
* @param arg2
* @param fix
* @returns {*}
*/
function accMul(arg1,arg2,fix) {
if(!parseInt(fix)==fix)
{
return;
}
var m=0,s1=(),s2=();
try{m+=(".")[1].length}catch(e){}
try{m+=(".")[1].length}catch(e){}
if(m>fix){
return ((Number((".",""))*Number((".",""))/(10,m-fix))/(10,fix));
}else if(m<=fix){
return (Number((".",""))*Number((".",""))/(10,m)).toFixed(fix);
}else{
return (arg1*arg2).toFixed(fix);
}
}
});
});
Core Function Knowledge:
It is stored through a global array. After clicking on the product, the product information obtained is used to drive the shopping cart table display.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.