日程表、學生課表外掛

飛翔荷蘭人發表於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 飛翔的荷蘭人.

相關文章