1. 会议室预定功能简介
用户登陆系统,可以预定会议室,退订,不可对其他用户预定的会议室预定
2. 会议室知识点扩充
2.1 加载框
加载框的含义是,每次数据提交会有一些效果,比如转圈等
本质利用了遮罩层
{# 模态对话框形式的加载框#} .hide{ display: none; } .shade { position: fixed; z-index: 1040; top: 0; left: 0; right: 0; bottom: 0; background-color: #999; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .loading { position: fixed; z-index: 1050; top: 40%; left: 50%; height: 32px; width: 32px; margin: 0 0 0 -16px; background: url(/static/img/loading.gif); } ============ body {# 遮罩层#} <!-- 遮罩层开始 --> <div id=‘shade‘ class=‘shade hide‘></div> <!-- 遮罩层结束 --> <!-- 加载层开始 --> <div id=‘loading‘ class=‘loading hide‘></div> <!-- 加载层结束 --> ============ 只需要在数据需要刷新的时候出现,或者隐藏就可以了 $(‘.shade,.loading‘).addClass(‘hide‘);
2.2 时间插件
时间插件指的是自己选则时间,只能大于等于今天的一个插件
{# input时间插件#} <link rel="stylesheet" href="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.min.css‘ %}"> {# input时间框#} <div class=‘input-group‘ style="width: 230px"> <input type=‘text‘ class="form-control" id=‘datetimepicker11‘ placeholder="请选择日期"/> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> {#bootstrap的js#} <script src="{% static ‘plugins/bootstrap/js/bootstrap.min.js‘ %}"></script> {#datetimepicker的js还依赖jquery的js#} <script src="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.min.js‘ %}"></script> {#datetimepicker的字体#} <script src="{% static ‘plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js‘ %}"></script> 页面加载完自动执行#} $(‘#datetimepicker11‘).datetimepicker({ minView: "month", // 最小月,不写这个,到小时分:分钟 language: "zh-CN", sideBySide: true, format: ‘yyyy-mm-dd‘, bootcssVer: 3, //bootsrap 3格式生成小图标 startDate: new Date(), // 开始日期 autoclose: true // 页面自动关闭 }).on(‘changeDate‘, changeDate);
// input选择时间,ev是input选中的时间,是个时间对象 function changeDate(ev) { chose_date = ev.date.Format(‘yyyy-MM-dd‘); // 更新了全局变量INPUT时间 getbookinfo(chose_date) }
http://www.bootcss.com/p/bootstrap-datetimepicker/
2.3 js的扩展方法
扩展方法是指给原来没有该功能,扩展一个功能出来
给字符串扩展方法 v = ‘aaaa’ String.prototype.xxx = function(arg){ return ‘888’ } v.xxx = 888 给日期扩展方法,date类型变成字符串类型 v = new Date() Date.prototype.Format = function (fmt){ 对fmt进行处理,就是获取日期,拼接的 } v.Format (‘yyyy-MM-dd’)
// 获取当前时间,如果用户取的是未来几天的,只需要传个参数即可 {# d = new Date();#} {# d.getDate() 日期#} {# d.getFullYear() 年份#} {# d.getMonth() 月份+1#} // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; };
2.4 js数组索引
// 在ADD中找到并删除 var index = post_data.add[room_id].indexOf(time_id); // 数组索引 if(index !== -1){ // 我想取消的,如果没有这个索引返回的是-1 post_data.add[room_id].splice(index,1); // 插入 }
3. 数据格式
# 生成这样的数据 # data = [ # [{‘text‘:‘海天盛宴‘,‘attrs‘:{}},{‘text‘:‘王大锤‘,‘attrs‘:{‘room_di‘:1,‘time_id‘:1,‘class‘:‘chose‘}},{‘text‘:‘‘,‘attrs‘:{‘room_di‘:1,‘time_id‘:2,‘class‘:‘‘}},], # 表示王大锤预定 # [{‘text‘:‘天上人间‘,‘attrs‘:{}},{‘text‘:‘egon‘,‘attrs‘:{‘room_di‘:2,‘time_id‘:1,‘class‘:‘chose‘}},{‘text‘:‘joker‘,‘attrs‘:{‘room_di‘:2,‘time_id‘:2,‘class‘:‘chose‘}},], # 表示王大锤预定 # [{‘text‘:‘信阳会所‘,‘attrs‘:{}},{‘text‘:‘‘,‘attrs‘:{‘room_di‘:3,‘time_id‘:1,‘class‘:‘‘}},{‘text‘:‘eva‘,‘attrs‘:{‘room_di‘:3,‘time_id‘:2,‘class‘:‘chose‘}},], # 表示王大锤预定 # ]