課程表插件Timetables(原創)

                所屬分類:輸入-日期和時間

                 3443  19  查看評論 (0)
                課程表插件Timetables(原創) ie兼容9

                Timetables

                安裝

                npm install timetables

                直接引入

                或者直接引入該地址下Timetables.min.js

                使用

                import Timetables from 'timetablestim';
                let Timetable;
                // 在可以獲取到真實dom節點到周期里進行實例化
                var courseList = [
                        ['語文','語文','英語','物理','語文','數學','英語','物理','物理','數學','英語','物理'],
                        ['數學','語文','物理','物理','語文','語文','語文','物理','數學','語文','語文','體育'],
                        ['語文','數學','英語','物理','語文','數學','英語','物理','語文','數學','英語','物理'],
                        ['數學','語文','物理','物理','語文','語文','語文','英語','數學','語文','語文','體育'],
                        ['語文','數學','英語','物理','語文','數學','英語','物理','語文','數學','英語','物理'],
                 ];
                Timetable = new Timetables({
                    el: '#coursesTable',
                    timetables: courseList,
                    week: ['一', '二', '三', '四', '五'],
                    timetableType: [
                        ['上午', 4],
                        ['下午', 4],
                        ['晚上', 4]
                    ],
                });

                參數及方法

                參數or方法類型說明
                elString(必傳)綁定dom節點的id('#id')
                timetablesArray(必傳)日程表內容,格式為二維數組
                weekArray(必傳)日程表頭部周,格式為二維數組
                timetableTypeArray(必傳)日程表左側分類,格式為二維數組
                highlightWeekNumber傳入表頭當天的索引,為日程表頭部高亮某周增加一個class(可自定義樣式)
                stylesObject日程表內容樣式,具體使用見下文
                mergeBoolean是否合并一天內臨近的相同日程(默認為true)
                gridOnClickFunction單元格點擊觸發事件,方法參數中可獲取到該格的信息
                setOptionFunction實例化上的方法, 重新設置參數渲染表格,參數同上(沒有el參數)

                參數示例

                var timetables = [
                        ['大學英語(Ⅳ)@10203','大學英語(Ⅳ)@10203','','','','','毛概@14208','毛概@14208','','','','選修'],
                        ['','','信號與系統@11302','信號與系統@11302','模擬電子技術基礎@16204','模擬電子技術基礎@16204','','','','','',''],
                        ['大學體育(Ⅳ)','大學體育(Ⅳ)','形勢與政策(Ⅳ)@15208','形勢與政策(Ⅳ)@15208','','','電路、信號與系統實驗','電路、信號與系統實驗','','','',''],
                        ['','','','','電裝實習@11301','電裝實習@11301','','','','大學體育','大學體育',''],
                        ['','','數據結構與算法分析','數據結構與算法分析','','','','','信號與系統','信號與系統','',''],
                ];
                var timetableType = [
                        [{index: '1',name: '8:30'}, 1],
                        [{index: '2',name: '9:30'}, 1],
                        [{index: '3',name: '10:30'}, 1],
                        [{index: '4',name: '11:30'}, 1],
                        [{index: '5',name: '12:30'}, 1],
                        [{index: '6',name: '14:30'}, 1],
                        [{index: '7',name: '15:30'}, 1],
                        [{index: '8',name: '16:30'}, 1],
                        [{index: '9',name: '17:30'}, 1],
                        [{index: '10',name: '18:30'}, 1],
                        [{index: '11',name: '19:30'}, 1],
                        [{index: '12',name: '20:30'}, 1]
                ];
                var week =  ['周一', '周二', '周三', '周四', '周五'];
                var highlightWeek = new Date().getDay();
                var styles = {
                    Gheight: 50,
                    leftHandWidth: 50,
                    palette: ['#ff6633', '#eeeeee']
                };
                // 實例化(初始化課表)
                var Timetable = new Timetables({
                    el: '#coursesTable',
                    timetables: timetables,
                    week: week,
                    timetableType: timetableType,
                    highlightWeek: highlightWeek,
                    gridOnClick: function (e) {
                      alert(e.name + '  ' + e.week +', 第' + e.index + '節課, 課長' + e.length +'節')
                      console.log(e)
                    },
                    styles: styles
                });
                //重新設置參數 渲染
                function onChange() {
                  Timetable.setOption({
                    timetables: courseListOther,
                    week: ['一', '二', '三', '四', '五', '六', '日'],
                    styles:{
                      palette: ['#dedcda', '#ff4081']
                    },
                    timetableType:courseType,
                    gridOnClick: function (e) {
                      console.log(e)
                    }})
                };
                • timetables 參數為表格內容項,格式為二維數組,數組第二維中每項長度需要和timetableType 中每一項的長度的累計總和一致, 長度不足時會自動以空字符串追加補全。

                • 同一天內臨近的日程相同時會自動合并為一格展示(設置merge參數為false時不自動合并)。

                • timetableType 參數可以將表格內容分類,數組內的每一項為該行標簽,用于分隔行。

                • 每項中第一項可以是字符串或者一個對象,當為對象時會自動生成多項dom節點。

                • 第二項為要分類的長度,所有長度累計總和應該與timetables參數中每一項的保持長度一致。

                • week 參數為表格列名,將內容依次分隔為相應列數

                • highlightWeek 參數為數字索引(從1開始),索引對應你上面week參數里的項,傳入索引后會在表格頭對應節點加上一個class

                • styles 參數為表格表格樣式:

                • Gheight 為表格內每一個單元格高度(number)單位為'px' 

                • leftHandWidth 為表格左側日程分類樣式寬帶度(number)單位為'px'

                • palette 為合并相同課程單元格后顏色調色盤,默認有15種顏色,可以傳入顏色數組自定義(傳入的顏色會與默認顏色合并,并優先使用自定義顏色),設為false時不為課程單元格生成色盤顏色

                • setOption 在實例化對象上可以使用setOption方法重新渲染表格。參數使用同上,不需要再傳入el參數綁定dom,默認使用實例化時候的dom節點

                • 日程表沒有過多進行樣式裝飾,可以根據已有的css類自行美化。有課程內容的節點會綁定名為course-hasContent的class,課程行單元會根據timetableType的分類對應生成**stage_***的class,

                相關插件-日期和時間

                mobiscroll_手機上下滾動選擇日期時間

                可以上下滾動選擇年月日時分秒
                  日期和時間
                 44783  251

                仿美團酒店的日期插件,修改過的

                插件仿美團的日期選擇插件,有需要的可以下載看看
                  日期和時間
                 20849  92

                選擇日期

                一個選擇下拉日期的代碼
                  日期和時間
                 39295  121

                jQuery bootstrap酒店日期插件

                基于bootstrap日期插件實現,時間區間選擇,預定日期禁用
                  日期和時間
                 19690  46

                討論這個項目(0)回答他人問題或分享插件使用方法獎勵jQ幣

                取消回復
                  短信接口
                快3倍投资金计划