jquery.seat-chartsMark在线选座插件使用1

场景1：在创建/编辑场馆时，需要对有座位的场馆进行排列座位，我需要用到动态增加场馆的位置，方便今后在开启一个活动时，能将位置出租及预定。当然，我们在排列位置前必须要知道哪些地方有位置。

场景2：当场馆管理员发布一个活动时，会根据座位号报名及验票等，在发布后，可以预定一些座位。

场景3：当用户报名时，选择位置后才能继续下一步报名，报名后将选择的座位保存并提示信息给场馆发布的管理员

实现：

为了进行实战，我创建了一个web的spring boot的项目
大致目录如下：

场景1

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

<!doctype html>
<html>
<head>
<title>jQuery在线选座位</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.seat-charts.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.seat-charts.js"></script>
</head>
<body>
<div class="wrapper"><div class="container"><div id="seat-map"><div class="front-indicator">座位选择</div><div><input type="text" style="width:30px;" id="x" value="10"> × <input type="text" style="width:30px;" id="y" value="10"><input type="button" value="确定" onclick="registSeat()"></div><div id="seat-maps"></div></div><div class="booking-details"><ul id="selected-seats"></ul><p><button class="checkout-button" id="save">保存</button></p>      <div id="legend"></div></div></div>
</div><script>
var firstSeatLabel = 1;
$(document).ready(function() {registSeat();$("#save").on("click",function(){$.get("save?str="+map).success(function(data){console.log(data);});});
});
var map = new Array();
function registSeat(){var x = parseInt($("#x").val());var y = parseInt($("#y").val());map = [];for(var i=0;i<x;i++){map[i]="";for(var j=0;j<y;j++){map[i]+="e";}}$('#seat-maps').empty();$("#legend").empty();firstSeatLabel = 1;var sc = $('#seat-maps').seatCharts({map: map,naming: {top: false, //不显示顶部横坐标（行） left:false,getLabel: function(character, row, column) { //返回座位信息 return firstSeatLabel++;}},legend: {node: $('#legend'),items: [[ 'e', 'available',   '位置' ],[ 'e', 'none', '过道']]},click: function() {if (this.status() == 'available') { //若为可选座状态，添加座位map[this.settings.row]=map[this.settings.row].substring(0,this.settings.column)+"_"+map[this.settings.row].substring(this.settings.column+1);return 'none';}else {map[this.settings.row]=map[this.settings.row].substring(0,this.settings.column)+"e"+map[this.settings.row].substring(this.settings.column+1);return "available";}}});// sc.get(['1_2', '4_1', '7_1', '7_2']).status('none');
}       </script>
</body>
</html>

还是标一张简单的介绍描述图吧：

页面效果

**当点击过道时，我们会改变过道的样式，再次点击时，将会改变成位置，但是我们需要保存这个过道信息应该怎么办呢?我们应该记录下来点击过道或者位置时的操作，这里我是修改了map数组，请看代码（修改方式多种，不一一描述）
**

jquery.seat-chartsMark在线选座插件使用相关推荐

jQuery在线选座订座（影院篇）
jQuery在线选座订座(影院篇) 原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付. ...
php 在线选座,基于jquery实现在线选座订座之影院篇
先给大家展示效果图(支持源码下载哦): 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座 ...
jQuery实现在线选座订座（影院篇）
我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付.本文以电影院购票为例,为您展示如何选座.处理选座数据等. 在这里,我给大家介绍 ...
php 在线选座,基于jQuery实现在线选座之高铁版_jquery
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
用html制作一个中国高铁网页,基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
jQuery在线选座系统（高铁版）
除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选座.不同等级座 ...
php 选座,jQuery在线选座（高铁版）
HTML 和上一篇文章一样:jQuery在线选座订座(影院篇),我们使用相同的html结构,左侧显示位置布局图,右侧显示选座相关信息.相关CSS代码请下载DEMO源码查看,本文不再详述. 01车选座 ...
座位选座的java代码_基于jQuery实现在线选座之高铁版
效果图展示: 除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选 ...
jQuery在线选座订座（高铁版）
除了电影院在线选座,我们还会接触到飞机机舱选座,当然也有汽车票火车票选座的.假如有一天买火车票也提供在线选座,那么今天我来给大家介绍下如何使用jQuery选座插件完成高铁列车座位布置.选座.不同等级座 ...
html影院选座模板,jQuery在线选座(影院版)
jquery.seat-charts是一款适合电影票.高铁票的在线选座插件,支持自定义样式,支持设置座位状态,并且支持键盘控制座位. 查看演示下载资源: 2215 次下载资源下载积分: 106 ...

jquery.seat-chartsMark在线选座插件使用

jquery.seat-chartsMark在线选座插件使用1

实现：

场景1

页面效果

jquery.seat-chartsMark在线选座插件使用相关推荐

最新文章

热门文章