插件描述：Timetable 課程表 日程表 插件

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，

總結

以上是生活随笔為你收集整理的html课表插件,课程表插件Timetables(原创)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。