日程表、學生課表外掛

飛翔荷蘭人發表於2019-03-03

Timetables

GitHub地址

日程表外掛，線上預覽 demo1 、demo2

Timetables1
Timetables1
Timetables
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方法 型別 說明
el String(必傳) 繫結dom節點的id('#id')
timetables Array(必傳) 日程表內容,格式為二維陣列
week Array(必傳) 日程表頭部周,格式為二維陣列
timetableType Array(必傳) 日程表左側分類,格式為二維陣列
highlightWeek Number 傳入表頭當天的索引,為日程表頭部高亮某周增加一個class(可自定義樣式)
styles Object 日程表內容樣式，具體使用見下文
merge Boolean 是否合併一天內臨近的相同日程(預設為true)
gridOnClick Function 單元格點選觸發事件,方法引數中可獲取到該格的資訊
setOption Function 例項化上的方法, 重新設定引數渲染表格,引數同上(沒有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，

作者

See 飛翔的荷蘭人.

相關文章