html课表插件,课程表插件Timetables(原创)
插件描述: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(原创)相关推荐
- Eclipse装了插件之后插件没反应启用不了或不显示问题的解决办法
2019独角兽企业重金招聘Python工程师标准>>> 本文是关于Eclipse装了插件之后插件没反应启用不了或不显示问题的解决办法的内容. 一.问题描述 装了插件以后(一般是把插件 ...
- 如何在Cordova Android 7.0.0 以下版本集成最新插件 极光插件为例
前提 Cordova Android 7.0.0开始改变了项目安卓平台的架构.新建一个空项目分别添加Android 6.4.0 和 Android 7.0.0平台: cordova platform ...
- 如何在Cordova Android 7.0.0 以下版本集成最新插件 极光插件为例 1
2019独角兽企业重金招聘Python工程师标准>>> 前提 Cordova Android 7.0.0开始改变了项目安卓平台的架构.新建一个空项目分别添加Android 6.4.0 ...
- eclipse mybatis插件_Archetype插件的介绍和使用
Maven除了有完成构建的插件外,还有一种插件-- Archetype 插件.它的作用是生成 Maven 项目骨架(项目的目录结构和 pom.xml).只要给对应的 Archetype 插件提供基本的 ...
- jQuery插件 -- Cookie插件jquery.cookie.js(转)
2019独角兽企业重金招聘Python工程师标准>>> jQuery插件 -- Cookie插件jquery.cookie.js(转) Cookie是网站设计者放置在客户端的小文本文 ...
- 火狐插件火狐***插件将Firefox变成***工具的七个插件
[转]火狐插件火狐***插件将Firefox变成***工具的七个插件 目前很多插件不支持 Firefox 3.5 哦 1. Add N Edit Cookies 查看和修改本地的Cookie,Cook ...
- 转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
- 增加第三方插件_AE插件排行!!
大家好 是万能的懒懒酱 After effects为视觉效果艺术家和动画设计师带来了大量的效果.然而,第三方开发人员提供了更多独特插件,供After Effects使用.在这里可以帮助你了解哪些插件是 ...
- ae插件form_AE插件 | 没有这些插件,还想做特效?
对于AE的使用者来说,插件是必不可少的.有很多特效效果,只用AE本身的效果来做的话,不仅十分困难,最后的效果可能也达不到预期. 之前在AE基础训练营的时候,很多同学都让我推荐过插件.今天CC整理了一下 ...
最新文章
- SpringBoot 实战 (八) | 使用 Spring Data JPA 访问 Mysql 数据库
- [Go]通道(channel)的基本操作
- wust2013届推免生复试机试代码
- java.net.UnknownHostException: dbmtimehadoop
- java反射获取包下所有的类
- docker教程,dockerfile教程
- 【干货】32个EMC标准电路分享!
- 使用eclipse导入spring-framework-5.0.x源码
- 同比和环比的计算方式
- K Simple question (第十届山东理工大学ACM网络编程擂台赛 正式赛)
- warning: backslash and newline separated by space
- 关于Faster-RCNN
- PHP生成图形验证码
- MATLAB Symbolic Math Toolbox
- 冷笑话 企鹅与北极熊
- 【信号与系统】(六)连续系统的时域分析 ——冲激响应与阶跃响应
- 【Maven】Maven的常用命令
- 前22年的Loser,后4年和自己赛跑的人 | 最惨前端面经
- Mi_Smart_Band_6(小米手环6)心跳数值PC显示
- 审计署计算机培训心得体会,审计署计算机中级培训心得体会.docx
热门文章
- Python学习笔记——time模块和datatime模块【时间处理】
- apt ubuntu 指定ipv4_如何使用 apt 命令安装软件
- 图像处理理论(八)——Meanshift, Camshift, Optical flow
- cocos2dx build_native.sh clean 命令报错的解决
- 使用git时ssh提示“Load key /home/devid/.ssh/id_rsa: bad permissions”的解决办法
- Flutter 15: 图解 ListView 不同样式 item 及 Widget 显隐性
- jquery 中 fn.apply(this, arguments)是什么函数?有什么作用?能举个例子吗
- java递归算法实现
- Python线程编程—同步队列
- 关于使用Carbide编译及配置的一点注意事项