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‘}},],  # 表示王大錘預定
# ]

會議室預定終章