根据jquery.seat-charts 实现的在线选座系统
最近在做项目中遇到一个功能：通过后台自定义场地座位布局，然后通过前台进行座位的选择，由于自己是做后端的，对复杂的js不拿手，所以在网上搜索了一个jquery插件，网上资料对于这个插件的说明资料也比较多，这篇文章意在记录我自己的思路和实现，对各位有帮助那就最好
jquery-seat-charts插件入口
实现这个功能最主要的两个文件就是jquery.seat-charts.css和jquery.seat-charts.js文件
1.后台自定义场座位布局
后台自定义座位布局主要操作的是前端部分，线上前端主要代码代码
<html>
<head></head>
<body>
<form:form id="inputForm" modelAttribute="" action="" method="post" class="form-horizontal form-information pad form-lie">
<div class="wrapper">
<div class="container">
<div id="seat-map">
<div class="front-indicator" style="color: white;margin: 20px 0px; font-size: 16px;">座位排列</div>
<div id="legend" style="float:left;"></div>
<div style="padding: 25px 0px; margin-left:230px; height: 80px;line-height: 30px;">
<input type="text" style="width: 100px;" id="x" value="10">
<span style="color: white;">×</span>
<input type="text" style="width: 100px;" 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>
<div id="legend"></div>
</div>
</div>
</div>
<div class="form-group" style="margin-top: 20px;">
<div class="col-sm-offset-1 col-sm-11">
<input id="btnSubmit" class="btn btn-primary" type="button" value="保 存"/>
<input id="btnCancel" class="btn btn-default" type="button" value="返 回" onclick="history.go(-1)"/>
</div>
</div>
</form:form>
<script>
$(document).ready(function() { //页面加载的时候加载默认行列数
var mapData = $("#placeMap").val();
registSeat(mapData);
});
var map = new Array(); //定义全局数组变量，操作完毕后用于保存
function registSeat(mapData) {
map = [];
if (mapData=='') {
var x = parseInt($("#x").val()); //初始化行数默认10
var y = parseInt($("#y").val()); //初始化列数默认10
for (var i = 0; i < x; i++) {
map[i] = "";
for (var j = 0; j < y; j++) {
map[i] += "e"; //这里用字母e表示有座位，对应class属性为‘available’
}
}
}else {
var mapNew = mapData.split(",");
$("#x").val(mapNew.length);
$("#y").val(mapNew[1].length);
map = mapNew;
}
$('#seat-maps').empty();
$("#legend").empty();
var firstSeatLabel = 1; //座位上边显示的label默认开始数字
var oldRow = 1;
var sc = $('#seat-maps').seatCharts({
map : map,
naming : {
top : false, //不显示顶部列坐标（列）
left : false,//不显示左边行坐标（行）
getLabel : function(character, row, column) { //返回座位信息，显示在座位上边的内容
var str = '';
if($("#id").val()!="" && $("#id").val()!=null){
if (oldRow == row) {
str = row+"_"+firstSeatLabel;
if (character!=='_') {
firstSeatLabel++;
}
}else{
oldRow = row;
firstSeatLabel = parseInt(1);
str = row+"_"+firstSeatLabel;
firstSeatLabel++;
}
}
return str;
}
},
legend : { //座位状态说明显示
node : $('#legend'),
items : [ [ 'e', 'available', '座位' ]]
/* items : [ [ 'e', 'available', '位置' ],
[ 'e', 'none', '过道' ] ] */
},
click : function() {
if (this.status() == 'available') { //获取座位状态，当为可选状态时，将座位设置为空map中用_表示，然后返回修改后的座位状态
map[this.settings.row] = map[this.settings.row]
.substring(0,
this.settings.column)
+ "_"
+ map[this.settings.row]
.substring(this.settings.column + 1);
seatsId.val(this.settings.id);
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";
}
}
});
}
</script>
<body>
<html>
自定义没保存之前效果图
自定义保存之后的效果图
保存之后座位上边会自动排号，实现这个功能的主要代码是getLabel
保存的到数据库的map是一个字符串类似：e表示有座位 available，_表示空地儿 none
__eeeeee__,_eeeeeeee_,eeeeeeeeee,eeeeeeeeee,eeeeeeeeee
后台代码就只有一个简单的保存功能，就不贴代码了
2.前台座位选择的实现
前台座位的选择功能的实现，相较于后台场馆座位的自定义有一点复杂：
1.前端代码增加了几个重要的传给后台的数据：座位id（用于后台判断座位是否已经被别人先一步选择），座位label（这个是真实的座位号）
2.后端需要检测当前用户选择的座位有没有被他人选择，进行用户座位保存，以及更新座位状态
前端主要代码
<form method="post" action="" id="selectSeatForm" class="">
<!-- 座位id 用于判断所选座位是否，已经被选过了-->
<input type="hidden" id="seats_id" name="seatsId" value=""/>
<!-- 座位label 选择的真实座位 -->
<input type="hidden" id="seats_label" name="seatsLabel" value=""/>
<!-- 座位map -->
<input type="hidden" id="currentPlaceMap" name="currentPlaceMap" value="">
<div class="wrapper">
<div class="container">
<div id="seat-map">
<div class="front-indicator" style="color: black;margin: 20px 0px; font-size: 16px;">座位排列</div>
<div>
<div id="legend"></div>
</div>
<div id="seat-maps"></div>
</div>
<div class="booking-details">
<ul id="selected-seats">
</ul>
<div id="legend"></div>
</div>
</div>
</div>
</form>
<div class="operation">
<span class="submit">确定</span>
<span class="cancle">取消</span>
</div>
<script>
var map = new Array();
var seatsId = $("#seats_id");
var seatsLabel = $("#seats_label");
var firstSeatLabel = 1;
function registSeat(mapData) {
map = [];
if (mapData!='') {
var mapNew = mapData.split(",");
map = mapNew;
}
// alert(map);
$('#seat-maps').empty();
$("#legend").empty();
firstSeatLabel = 1;
oldRow = 1;
var sc = $('#seat-maps').seatCharts({
map : map,
naming : {
top : false, //不显示顶部横坐标（行）
left : false,
getId : function(character, row, column){
return row+"_"+column;
},
getLabel : function(character, row, column) { //返回座位信息
var str = '';
if (oldRow == row) {
str = row+"_"+firstSeatLabel;
if (character!=='_') {
firstSeatLabel++;
}
}else{
oldRow = row;
firstSeatLabel = 1;
str = row+"_"+firstSeatLabel;
firstSeatLabel++;
}
return str;
}
},
seats: {
e: {
classes : 'availabel'
},
f: {
classes : 'unavailable'
},
s: {
classes : 'selected'
}
},
legend : {
node : $('#legend'),
items : [ [ 'e', 'available', '可选' ],[ 'f', 'unavailable', '不可选' ],[ 's', 'selected', '已选' ]]
},
click : function() {
if (this.status() == 'available') { //获取座位状态，当为可选状态时，将座位设置为空 map中用_表示，然后返回修改后的座位状态
map[this.settings.row] = map[this.settings.row]
.substring(0,
this.settings.column)
+ "f"
+ map[this.settings.row]
.substring(this.settings.column + 1);
//选中座位后拼接到seatsId和seatsLabel上
seatsId.val(seatsId.val()+this.settings.id+",");
seatsLabel.val(seatsLabel.val()+this.settings.label+",");
return 'selected';
}else {
map[this.settings.row] = map[this.settings.row]
.substring(0,
this.settings.column)
+ "e"
+ map[this.settings.row]
.substring(this.settings.column + 1);
//取消选择后将选择的id和label去除掉
var arr = seatsId.val().split(this.settings.id+",");
seatsId.val(arr[0]+arr[1]);
var arr = seatsLabel.val().split(this.settings.label+",");
seatsLabel.val(arr[0]+arr[1]);
return "available";
}
}
});
}
</script>
后端主要代码
lock.lock();
Map<String, String> map = Maps.newHashMap();
try {
//先去判断座位有没有被选中
//获取当前活动的座位状态
Activity activity = dao.get(id);
String cpm = activity.getCurrentPlaceMap(); //当前活动的座位状态
String[] placeMapArr = cpm.split(",");
String[] seatsArr = seatsId.split(","); //学生所选座位id数组
for (String seat : seatsArr) {
String[] seatPlace = seat.split("_"); //拆分成座位的坐标 seatPlace[0]行数 seatPlace[1]列数
if(placeMapArr[Integer.parseInt(seatPlace[0])-1].charAt(Integer.parseInt(seatPlace[1])-1)=='f') {
map.put("status","0");
map.put("msg","该座位已经被人预定，请重新选择");
return map;
};
}
//没有被人选择的话更新座位状态
.......
//保存用户座位信息
.......
map.put("status", "1");
map.put("msg","座位选择成功");
return map;
} catch (Exception e) {
e.printStackTrace();
map.put("status", "0");
map.put("msg", "座位选择错误");
return map;
}finally {
lock.unlock();
}
效果图
到此功能结束，一点小小的收获
扫一扫
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
