web端在线选座功能
根据jquery.seat-charts 实现的在线选座系统1.后台自定义场座位布局2.前台座位选择的实现根据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());//初始化行数默认10var y = parseInt($("#y").val());//初始化列数默认10for (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();}
效果图
到此功能结束，一点小小的收获
