代码
使用的是jquery.seat开源工具
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在线选座</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="../css/seat/jquery.seat-charts.css"><link rel="stylesheet" type="text/css" href="../css/seat/style.css"></head><body><div class="wrapper"><div class="container"><div id="seat-map"><div class="front-indicator">座位</div></div><div id="legend"></div><div class="booking-details"><h3>已选中座位 (<span id="counter">0</span>):</h3><ul id="selected-seats" style="height: 30px;"></ul><p>总价: <b><span id="total">0</span>元</b></p><p><button class="checkout-button">结算</button></p></div></div></div><script src="../js/jquery-3.2.1.min.js"></script><script src="../js/jquery.seat-charts.js"></script><script>var firstSeatLabel = 1;$(document).ready(function() {var $cart = $('#selected-seats'),$counter = $('#counter'),$total = $('#total'),sc = $('#seat-map').seatCharts({map: ['___ffff_ffff___','___ffff_ffff___','___ffff_ffff___','__eeeee_eeeee__','__eeeee_eeeee__','_eeeeee_eeeeee_','_eeeeee_eeeeee_','eeeeeee_eeeeee','eeeeeee_eeeeee',],seats: {f: {price : 100,classes : 'first-class',category: 'vip座位'},e: {price : 40,classes : 'economy-class',category: '普通座位'}},naming : {top : false,getLabel : function (character, row, column) {return firstSeatLabel++;},},legend : {node : $('#legend'),items : [[ 'f', 'available', 'vip座位' ],[ 'e', 'available', '普通座位'],[ 'f', 'unavailable', '已预定']]},click: function () {if (this.status() == 'available') {$('<li>'+this.data().category+this.settings.label+'号'+' 价格：<b>'+this.data().price+'元</b> <a href="#" class="cancel-cart-item">[删除]</a></li>').attr('id','cart-item-'+this.settings.id).data('seatId', this.settings.id).appendTo($cart);$counter.text(sc.find('selected').length+1);$total.text(recalculateTotal(sc)+this.data().price);return 'selected';} else if (this.status() == 'selected') {$counter.text(sc.find('selected').length-1);$total.text(recalculateTotal(sc)-this.data().price);$('#cart-item-'+this.settings.id).remove();return 'available';} else if (this.status() == 'unavailable') {return 'unavailable';} else {return this.style();}}});$('#selected-seats').on('click', '.cancel-cart-item', function () {sc.get($(this).parents('li:first').data('seatId')).click();});//调用接口查询已经购买的座位$.getJSON("../data-json/seat_checked.json", function (data) {console.log(data.data);//设置已购买的座位不能选中sc.get(data.data).status('unavailable');});//sc.get(['1_5', '1_6', '1_7', '1_8','1_10','2_12','5_7','5_9','6_7','6_9','7_7','7_9','9_1','9_14']).status('unavailable');//修改样式,可依据需求修改style.css$(".seatCharts-container").width(500);//修改选座区域宽度，默认为200$(".front-indicator").width('90%');$(".seatCharts-legendList li").css("float","left");$("#selected-seats").width('90%')$(".booking-details").width(500)$(".booking-details").css("text-align","right");$(".checkout-button").css("display","inline");});function recalculateTotal(sc) {var total = 0;sc.find('selected').each(function () {total += this.data().price;});return total;}</script></body></html>
你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。
