High-speed rail version of online seat selection based on jQuery_jquery

Rendering display:

View demo Source code download

In addition to online seat selection in movie theaters, we will also be involved in seat selection in airplane cabins, and of course, bus and train ticket selection. If one day you can buy train tickets and also provide online seat selection, then today I will introduce to you how to use the jQuery seat selection plug-in to complete high-speed train seat layout, seat selection, and pricing of different classes of seats.

HTML

Same as the previous article: jQuery online seat selection and reservation (theater), we use the same html structure, with the location layout map displayed on the left and seat selection related information displayed on the right.

Please download the DEMO source code to view the relevant CSS code, which will not be detailed in this article.

<div class="container"> 
 <div id="seat-map"> 
 <div class="front">01车</div> 
 </div> 
 <div class="booking-details"> 
 <h3> 选座信息：</h3> 
 <ul id="selected-seats"></ul> 
 <p>票数: <span id="counter"></span></p> 
 <p>总计: ￥<span id="total">0</span></p> 
  
 <button class="checkout-button">确定购买</button> 
 <div id="legend"></div> 
 </div> 
</div> 

jQuery

To focus on the jQuery code, we still use the online seat selection plug-in: jQuery Seat Charts. First, arrange the seat layout of the high-speed rail car. I assume that there are first-class seats and second-class seats in Car No. 01, separated by entrance and exit passages. The general layout is as follows:

map: [ //座位图 
 'ff__ff', 
 'ff__ff', 
 '______', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee', 
 'eee_ee' 
], 

The above code f represents first class seats, e represents second class seats, and the symbol "_" represents aisle.

Then we need to define the relevant attributes of the seat type:

seats: { //定义座位属性 
 f: { 
 price : 100, 
 classes : 'first-class', 
 category: '一等座' 
 }, 
 e: { 
 price : 40, 
 classes : 'economy-class', 
 category: '二等座' 
 }  
}, 

The above code defines the price, category name and corresponding css style of first-class and second-class seats. They can be called later via the data() method.

Next we use naming to define the row and column information of the seat map. Setting top to true below means displaying the top abscissa (row). Columns and rows are used to define the abscissa (row) and ordinate (column) respectively. Value, getLabel is used to return seat information, such as: 01A means seat A in row 01.

naming : { //定义行列等信息 
 top : true, 
 columns: ['A', 'B', 'C', '', 'D','F'], 
 rows: ['01','02','','03','04','05','06','07','08','09'], 
 getLabel : function (character, row, column) { 
 return row+column; 
 } 
}, 

Then we use legend to define the legend. The element associated with the legend is #legend and define the corresponding style for the seat type.

legend : { //定义图例 
 node : $('#legend'), 
 items : [ 
 [ 'f', 'available', '一等座' ], 
 [ 'e', 'available', '二等座'], 
 [ 'f', 'unavailable', '已售出'] 
 ]  
}, 

Finally, when you click on the position in the seat map outside, different processing will be done according to the current seat status, including calculating the number of tickets and total amount, etc. You can refer to the instructions in the theater chapter.

click: function () { 
 if (this.status() == 'available') {//可选座 
 $('<li>'+this.data().category+'<br/>01车'+this.settings.label+'号<br/>￥'+this.data().price+'</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(); 
 } 
}, 

Finally, we use the get() and status() methods to set the seats that have been sold and are not available.

//Sold, no seats available

sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable'); 

It is worth mentioning that when ticket purchases on the website are very frequent, you need to pay attention to refreshing the seat map in time. If the seat has been preempted, it is not available. We can use ajax to make asynchronous requests and set it to run every 10 seconds. You can refer to the following code:

setInterval(function() { 
 $.ajax({ 
 type : 'get', 
 url : 'book.php', 
 dataType : 'json', 
 success : function(response) { 
 //遍历所有座位 
 $.each(response.bookings, function(index, booking) { 
 //将已售出的座位状态设置为已售出 
 sc.status(booking.seat_id, 'unavailable'); 
 }); 
 } 
 }); 
}, 10000); //每10秒

The above is the high-speed rail version of online seat selection based on jQuery introduced in this article. I hope you like it.