之前的项目中涉及到体育馆预约功能的实现,其中每个场馆的开放时间不同,场馆内场地数目不同,借助jQuery实现一个预约功能,效果如下图。这看起来有些类似于人们在电影院购买电影票的操作,根据选择的电影和场次在屏幕上显示影厅中所有座位的空闲情况。
首先分析一下数据库,其中一张场馆表,记录了场馆的名称、对应的运动、开放时间、场地数目等信息,同一种运动可能对应多个场馆,比如东区篮球场、西区篮球场等,它们的开放时间、场地数目可能各不相同。另一张比较重要的表就是预约表了,记录了预约的订单号、用户的id、场馆的id、场地号、预约开始时间、结束时间以及下订单的时间,比如图中这种情况,篮球馆的场地数是10,那么场地的编号就是从1到10。
这便引出了设计的难点,数据库中只是保存了预约的记录,那是不是要经过很繁琐的sql语句查询分别获得每个时间段、每个场地的预约状况才能实现如图所示的效果呢?其实不然,我们只需要查询出当天该场馆所有预约的记录并以Json格式数据返回即可,剩下的工作由jQuery实现。
表格单元所表示的对应时段场地情况有四种状态:可预约(此时未选中)、过期、已被占用、选中。对应css样式如下:
tr .occupied {
background: #ff0;
}
tr .outtime {
background: #bbb;
}
tr .useable {
background: #fff;
}
tr .outtime:hover,tr .occupied:hover {
cursor: not-allowed;
}
tr .useable:hover {
cursor: pointer;
background: #30abc1;
}
tr .useable:active {
background: #0072ac;
}
tr .selected {
background: #30abc1 !i