整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
tml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css">
<script src="js/jquery_shopping.js"></script>
</head>
<body>
<div class="panel-group">
<div class="panel panel-primary">
<table class="table table-bordered table-striped table-hover table-condensed" id="tab_s">
<thead>
<tr class="info">
<th>商品名稱(chēng)</th>
<th>單價(jià)</th>
<th>數(shù)量</th>
<th>小計(jì)</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tby">
<tr>
<td>電腦</td>
<td class="price">￥3999.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請(qǐng)輸入數(shù)量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥3999.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
<tr>
<td>手機(jī)</td>
<td class="price">￥1998.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請(qǐng)輸入數(shù)量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥1998.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
<tr>
<td>空調(diào)</td>
<td class="price">￥2099.00</td>
<td>
<div class="row">
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="sub">
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button>
</div>
<div class="col-md-1">
<input class="form-control input-sm" type="text" name="num" value="1" placeholder="請(qǐng)輸入數(shù)量">
</div>
<div class="col-md-1">
<button type="button" class="btn btn-default btn-sm" name="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
</div>
</div>
</td>
<td class="small_total">￥2099.00</td>
<td>
<button type="button" class="btn btn-default btn-sm" name="delete">
<span class="glyphicon glyphicon-remove"> 刪除</span>
</button>
</td>
</tr>
</tbody>
</table>
<div class="panel-footer">
<span>已選<span style="color: red;" class="num_sum">1</span>件商品</span>
<span>總計(jì):</span>
<span class="sum" style="color: red;">0</span>
<div>
<button type="button" class="btn btn-default btn-sm" name="delSome">
刪除選中商品
</button>
<button type="button" class="btn btn-default btn-sm" name="delAll">
清空購(gòu)物車(chē)
</button>
</div>
</div>
</div>
</div>
</body>
</html>Js代碼：
$(function(){
function initTableCheckbox() {
var $thr = $('table thead tr');
var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
/*將全選/反選復(fù)選框添加到表頭最前，即增加一列*/
$thr.prepend($checkAllTh);
var $checkAll = $thr.find('input');
$checkAll.click(function(event){
/*將所有行的選中狀態(tài)設(shè)成全選框的選中狀態(tài)*/
$tbr.find('input').prop('checked',$(this).prop('checked'));
/*并調(diào)整所有選中行的CSS樣式*/
if ($(this).prop('checked')) {
$tbr.find('input').parent().parent().addClass('warning');
}
else{
$tbr.find('input').parent().parent().removeClass('warning');
}
getSum();
/*阻止向上冒泡，以防再次觸發(fā)點(diǎn)擊操作*/
event.stopPropagation();
});
/*點(diǎn)擊全選框所在單元格時(shí)也觸發(fā)全選框的點(diǎn)擊操作*/
$checkAllTh.click(function(){
$(this).find('input:[type="checkbox"]').click();
});
var $tbr = $('table tbody tr');
var $checkItemTd = $('<td><input type="checkbox" name="checkItem" class="chk_itm"/></td>');
/*每一行都在最前面插入一個(gè)選中復(fù)選框的單元格*/
$tbr.prepend($checkItemTd);
/*點(diǎn)擊每一行的選中復(fù)選框時(shí)*/
/*
$tbr.find('input').click(function(event){
//調(diào)整選中行的CSS樣式
$(this).parent().parent().toggleClass('warning');
//如果已經(jīng)被選中行的行數(shù)等于表格的數(shù)據(jù)行數(shù)，將全選框設(shè)為選中狀態(tài)，否則設(shè)為未選中狀態(tài)
$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
//阻止向上冒泡，以防再次觸發(fā)點(diǎn)擊操作
event.stopPropagation();
});
//點(diǎn)擊每一行時(shí)也觸發(fā)該行的選中操作
$tbr.click(function(){
$(this).find('input').click();
});
*/
}
initTableCheckbox();
getSum();
$(".chk_itm").change(function() {
getSum();
});
//添加商品
$("button[name='add']").click(function() {
let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
console.log("添加商品的num:"+n);
n++;
$(this).parent().siblings().find("input[name='num']").val(n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("添加商品的price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
//減少商品
$("button[name='sub']").click(function() {
let n = parseInt($(this).parent().siblings().find("input[name='num']").val());
console.log("減少商品的num:"+n);
if (n === 1) {
return false;
}
n--;
$(this).parent().siblings().find("input[name='num']").val(n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("減少商品的price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
$("input[name='num']").change(function() {
let n = $(this).val();
console.log("數(shù)量num:"+n);
let price = $(this).parent().parent().parent().siblings(".price").html();
price = price.substr(1);
console.log("價(jià)格price:"+price);
$(this).parent().parent().parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
getSum();
});
function getSum() {
let count = 0; //計(jì)算總件數(shù)
let money = 0; //計(jì)算總價(jià)錢(qián)
$("input[name='num']").each(function(index) {
if ($(".chk_itm").eq(index).prop("checked") == true) {
count += parseInt($("input[name='num']").eq(index).val());
money += parseFloat($(".small_total").eq(index).text().substr(1));
}
});
$(".num_sum").html(count);
$(".sum").html(money.toFixed(2));
}
//點(diǎn)擊刪除之后一定是刪除當(dāng)前的商品，獲取this
$("button[name='delete']").click(function() {
//刪除的是當(dāng)前的商品
$(this).parent().parent().remove();
$(".chk_itm").change();
getSum();
clearCheckAll();
});
//刪除選定的商品:小的復(fù)選框如果選中就刪除對(duì)應(yīng)的商品
//刪除的是選中的商品
$("button[name='delSome']").click(function() {
//刪除的是選中的商品
$(".chk_itm:checked").parent().parent().remove();
getSum();
clearCheckAll();
});
//清空購(gòu)物車(chē)
$("button[name='delAll']").click(function() {
$("#tby").empty();
getSum();
clearCheckAll();
});
function clearCheckAll() {
if ($("#tby").innerText == '') {
$(".checkAll").prop("checked", false);
}
}
});效果
案例和由此案例重點(diǎn)講解的知識(shí)點(diǎn)介紹
案例代碼實(shí)現(xiàn)
數(shù)據(jù)類(lèi)型知識(shí)點(diǎn)詳解
案例相關(guān)效果圖
該案例涉及到的知識(shí)點(diǎn)
js變量
js數(shù)據(jù)類(lèi)型
js運(yùn)算符
第一步：編寫(xiě)表單的html
依次拷貝出兩個(gè)tr，讓我們購(gòu)物車(chē)多幾件商品，只需要拷貝上一行代碼，然后修改一下標(biāo)題。價(jià)格即可
第二步：編寫(xiě)該表單的樣式css
第三步：引入方便的jquery庫(kù)，方便我們使用
第四步：綁定減少數(shù)量的按鍵，并獲取上一元素的單價(jià)，將字符串轉(zhuǎn)換成數(shù)字，同時(shí)獲取當(dāng)前input的數(shù)量，并進(jìn)行數(shù)據(jù)計(jì)算
第五步：依照減少商品數(shù)量的方法，仿寫(xiě)增加商品數(shù)量
1. JavaScript變量
變量的語(yǔ)法：
變量定義： var 自定義名稱(chēng);
<script>
var name=“張三”; //張三為變量 name是變量名 var 關(guān)鍵字定義變量
</script>
注意： = 為賦值符號(hào)，不是我們理解的等號(hào)
變量命名的規(guī)范：
變量名必須以字符或下劃線(xiàn)“_”開(kāi)頭
變量可以包含數(shù)字、從A至Z的大小字母
JavaScript嚴(yán)格區(qū)分大小寫(xiě)，computer和Computer是兩個(gè)完全不同的變量
禁止使用javascript的保留關(guān)鍵字作為變量名
2. JavaScript數(shù)據(jù)類(lèi)型
數(shù)字類(lèi)型（Number）
1: 最基本的數(shù)據(jù)類(lèi)型
2: 不區(qū)分整型數(shù)值和浮點(diǎn)型數(shù)值
3: 能表示的最大值是±1.7976931348623157乘以10的308次方
能表示的最小值是±5 乘以10的-324次方
4：包含十六進(jìn)制數(shù)據(jù)，以 0x開(kāi)頭 0到9之間的數(shù)字，a(A)-f(F)之間字母構(gòu)成。 a-f對(duì)應(yīng)的數(shù)字是10-15
5： 八進(jìn)制直接以數(shù)字0開(kāi)始，有0-7之間的數(shù)字組成。
字符串類(lèi)型（String）
字符串由單引號(hào)或雙引號(hào)括起
例如單獨(dú)一個(gè)字母也被稱(chēng)為字符串（例如：‘a(chǎn)’）
轉(zhuǎn)義字符 \" \'
比較運(yùn)算符：> ,<, ==, !=
var a=1; var b=2; alert(a>b);
布爾類(lèi)型：Boolean
Boolean類(lèi)型僅有兩個(gè)值：true和false，也代表1和0，實(shí)際運(yùn)算中true=1,false=0
JavaScript 特殊類(lèi)型
取值null 含義：值為空（主動(dòng)）
取值undefined 含義：變量未初始化
先讓我們看一下靜態(tài)頁(yè)面的效果圖：
簡(jiǎn)單說(shuō)一下這個(gè)功能模塊的需求：
現(xiàn)在讓我們開(kāi)始吧
一 ，創(chuàng)建一個(gè)Vue對(duì)象，設(shè)置好數(shù)據(jù)。
var cart; //全局Vue對(duì)象
//通過(guò)封裝一個(gè)方法來(lái)創(chuàng)建Vue對(duì)象
function createVue(list) { //傳入通過(guò)后臺(tái)獲取的list
cart = new Vue({
el:'#cart',
data(){
return {
list:list //商品列表
}
}
});
}
二 ，假設(shè)從后臺(tái)請(qǐng)求到數(shù)據(jù)，然后賦值到Vue對(duì)象中
window.onload = function () {
//請(qǐng)求后臺(tái)代碼 。。。。
//請(qǐng)求成功后將獲得的list賦值給cart的list
let list = [
{
goodsTitle: "衛(wèi)龍辣條", //商品名
specifications: "大包", //商品規(guī)格
unitPrice: "5", //商品單價(jià)
subimage1Filename :"20180317eeftyd.jpg", //商品圖片名
purchaseQuantity: 6 //商品數(shù)量
},
{
goodsTitle: "雕牌洗衣粉",
specifications: "大包",
unitPrice: "13",
subimage1Filename: "20180317ggptfg.jpg",
purchaseQuantity: 1
},
{
goodsTitle: "旺仔牛奶",
specifications: "20盒裝",
unitPrice: "45",
subimage1Filename: "20180317feftyp.jpg",
purchaseQuantity: 1
}];
createVue(list); //執(zhí)行創(chuàng)建Vue對(duì)象方法
}
);
三 ，修改html部分代碼，將數(shù)據(jù)展示出來(lái)
<tr v-for="(item,index) in list">
<td>
<input type="checkbox" :id="'check'+index" name="checkboxs" />
<label :for="'check'+index"></label>
</td>
<td>
<img :src="'路徑前綴/'+item.subimage1Filename" />
</td>
<td style="text-align:left;">
<p>{{item.goodsTitle}}</p>
<p>規(guī)格：{{item.specifications}}</p>
</td>
<td>￥{{item.unitPrice}}</td>
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
<td><button v-on:click="checkDel(index)">刪除</button></td>
</tr>
這樣就能將單個(gè)商品部分全部循環(huán)打印出來(lái)，并且將對(duì)應(yīng)的信息打印在對(duì)應(yīng)位置。效果圖如下：
四，實(shí)現(xiàn)全選和勾選時(shí)候總價(jià)的計(jì)算，這部分算是有點(diǎn)挑戰(zhàn)了。我的思路是在Vue對(duì)象中新增加一個(gè)數(shù)據(jù)用來(lái)標(biāo)識(shí)商品的選中狀態(tài)，所以創(chuàng)建Vue方法中的代碼改成如下所示：
cart = new Vue({
el: '#cart',
data() {
return {
list: list,
checkeds: new Array(list.length) //初始化成list的長(zhǎng)度
}
});
然后在html中將商品對(duì)應(yīng)的checkbox與checkeds綁定起來(lái),修改后的代碼如下：
<input type="checkbox" :id="'check'+index" name="checkboxs" v-model="checkeds[index]" />
利用computed屬性計(jì)算價(jià)格總和：
sum () {
let sum = 0;
for (let i in this.list) {
if (this.checkeds[i]) //如果checkeds[i]的結(jié)果為truth，則進(jìn)行累加
sum += this.list[i].unitPrice * this.list[i].purchaseQuantity;
}
return sum;
}
HTML部分，我們?cè)趯?duì)應(yīng)位置用{{sum}}帶入就能進(jìn)行顯示了。這樣就能實(shí)現(xiàn)計(jì)算勾選過(guò)的商品小計(jì)之和了。接下來(lái)實(shí)現(xiàn)全選功能，在methods屬性中添加一個(gè)方法checkAll，具體代碼如下：
checkAll (event) { //這里的event就是全選checkbox對(duì)象
if (event.checked) { //如果全選的checkbox選中，將checkeds所有的值設(shè)置為true，對(duì)應(yīng)商品checkbox的選中狀態(tài)自動(dòng)更新
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, true);
}
else { //否則就進(jìn)行與上面相反的操作
for (let i = 0; i < this.checkeds.length; i++) {
Vue.set(this.checkeds, i, false);
}
}
}
經(jīng)過(guò)上面的一波操作，已經(jīng)可以實(shí)現(xiàn)全選和點(diǎn)選時(shí)候的價(jià)格之和計(jì)算。我們還要統(tǒng)計(jì)商品選中的數(shù)量，這個(gè)很簡(jiǎn)單，同樣使用computed屬性，對(duì)checkeds中結(jié)果為truth的進(jìn)行統(tǒng)計(jì)就好了，代碼如下：
checkNum: function () {
let num = 0;
for (let i in this.checkeds) {
if (this.checkeds[i]) {
num++;
}
}
return num;
}
然后在html中的對(duì)應(yīng)位置用{{checkNum}}代入即可。現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了近一半需求，讓我們繼續(xù)完成他們吧！ 五 ，實(shí)現(xiàn)購(gòu)物車(chē)物品單個(gè)刪除功能，這個(gè)就很簡(jiǎn)單啦，我們?cè)趍ethods中增加一個(gè)del方法，使用js數(shù)組的splice方法就可以實(shí)現(xiàn)。
del (index) {
this.list.splice(index, 1); //只需要從數(shù)組中移除對(duì)應(yīng)項(xiàng)，視圖會(huì)自動(dòng)更新，不得不說(shuō)，Vue太棒啦！
this.checkeds.splice(index,1); //同時(shí)刪除對(duì)應(yīng)的選中狀態(tài)標(biāo)識(shí)
}
然后就是給刪除按鈕綁定點(diǎn)擊事件(index是循環(huán)列表時(shí)候的下標(biāo))：
<button v-on:click="del(index)">刪除</button>
這樣我們就輕松實(shí)現(xiàn)了刪除單個(gè)商品的需求，當(dāng)然防止用戶(hù)誤刪，在用戶(hù)點(diǎn)擊刪除按鈕時(shí)我們可以彈出一個(gè)確認(rèn)框提示用戶(hù)，這里我們就不去實(shí)現(xiàn)了。 六 ，實(shí)現(xiàn)購(gòu)物車(chē)單個(gè)商品的數(shù)量增加，減少，并實(shí)時(shí)更新商品的小計(jì)。首先在methods中添加增加方法add和減少方法minius：
add (index) {
this.list[index].purchaseQuantity++; //這里按理來(lái)說(shuō)應(yīng)該查詢(xún)后臺(tái)對(duì)應(yīng)商品庫(kù)存量來(lái)進(jìn)行限制的，這里不涉及到后臺(tái)所以沒(méi)加
},
minius (index) {
if (this.list[index].purchaseQuantity > 1) { //這里添加一個(gè)限制，最少要有一個(gè)商品
this.list[index].purchaseQuantity--;
}
}
然后我們?cè)趯?duì)應(yīng)的加和減的按鈕上綁定事件來(lái)觸發(fā)這兩個(gè)方法（index為列表循環(huán)時(shí)候的下標(biāo)）：
<td class="adddel">
<em v-on:click="minius(index)">-</em>
<input type="number" v-model.number="item.purchaseQuantity" />
<em v-on:click="add(index)">+</em>
</td>
<td>￥{{item.unitPrice * item.purchaseQuantity}}</td>
從上面的代碼可以看到我們?cè)谛∮?jì)一欄直接進(jìn)行商品單價(jià)和數(shù)量相乘，這樣就可以實(shí)現(xiàn)實(shí)時(shí)更新了。
至此，我們的需求就算是完成了，最后給大家留兩個(gè)小問(wèn)題思考一下
一 ，如何實(shí)現(xiàn)批量刪除？ 二 ，在全選之后，我們?nèi)∠艘粋€(gè)商品的狀態(tài)，全選框的選中狀態(tài)仍然是選中的，此時(shí)應(yīng)該是不選中的，或者當(dāng)我們一個(gè)一個(gè)把商品的選中狀態(tài)全部勾選，全選框的狀態(tài)仍然是補(bǔ)選中的，此時(shí)應(yīng)該是選中狀態(tài)（如下兩圖所示），這個(gè)現(xiàn)象如何解決？
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
