第一次使用timetables做学校课表的开发，里面的门道东西挺多的，比我想的要复杂很多。包括我现在也只是实现了课表的初级效果。 主要是标题部分，数据部分，还有颜色控制部分。每个表格都需要一个控制颜色，每次写数据的时候，顺带要把背景颜色加入里面。 palette 颜色，这个地方是最复杂的，因为涉及到对应关系。颜色是按照表格里面的列一个一个控制的，这块做前端渲染的时候很容易绕进去。
该插件主要用来实现各种课表相关功能。 主要解析timestable.js的使用方法，还有变种类型开发
var courseList = [
['英语', '英语', '', '', '', '', '毛概', '毛概8', '', '', '', '选修'],
['', '', '信号', '信号', '模拟', '模拟', '', '', '', '', '', ''],
['大学', '大学', '形势', '形势', '', '', '电路', '电路', '', '', '', ''],
['', '', '', '', '电装1', '电装', '', '', '', '体育', '体育', ''],
['', '', '数据', '数据', '', '', '', '', '信号', '信号', '', ''],
]; //这个数组里面的每一行数据在可视化表里面是每一列，我们后台需要进行转置处理 对比星期一到星期天，如果空缺，就空缺
var week = window.innerWidth > 360 ? ['周一', '周二', '周三', '周四', '周五','周六','周日'] :
['一', '二', '三', '四', '五','六','日']; //列表相关数据
var day = new Date().getDay(); //获取今天是星期几
var courseType = [
[{index: '1', name: '9:00'}, 1], //第一个index 是里面显示的标记 name表示这一行的信息
[{index: '2', name: '10:00'}, 1], //最后一个1表示占据的行数，默认一行，当有多行需求的时候，需要打开多行
[{index: '3', name: '11:00'}, 3],//这个表示 有过有数据的情况 会占据三行
[{index: '4', name: '12:00'}, 1],
[{index: '5', name: '13:00'}, 1],
[{index: '6', name: '14:00'}, 1],
[{index: '7', name: '15:00'}, 1],
[{index: '8', name: '16:00'}, 1],
[{index: '9', name: '17:00'}, 1],
[{index: '10', name: '18:00'}, 1]
]; //这里对应的是每一行的数据 不够就不显示出来
// 实例化(初始化课表)
var Timetable = new Timetables({
el: '#coursesTable', // 渲染的dom的ID
timetables: courseList, //时间格式
week: week, //星期模式 这样标题就会显示星期一到星期天
timetableType: courseType, //左边的刻度 如果某一行需要俩行列表显示，需要重复
highlightWeek: day, //天数
gridOnClick: function (e) {
console.log(e); //点击每个格子触发的事件，例如看到每节课的备注详情
},
styles: {
// palette: ['#dedcda', '#ff4081','#ff4081','#ff4081','#ff4081','#ff4081','#ff4081','#ff4081','#ff4081'],
palette:['green','red'], //横方向数的颜色对应 row[1][1] row[1][2] 会横向排列 这样可以控制每个格子的颜色显示
Gheight: 50 //每个格子的高度
}
});相关参数传入:
el String(必传) 绑定dom节点的id('#id')
timetables Array(必传) 日程表内容,格式为二维数组
week Array(必传) 日程表头部周,格式为二维数组
timetableType Array(必传) 日程表左侧分类,格式为二维数组
highlightWeek Number 传入表头当天的索引,为日程表头部高亮某周增加一个class(可自定义样式)
styles Object 日程表内容样式，具体使用见下文
merge Boolean 是否合并一天内临近的相同日程(默认为true)
gridOnClick Function 单元格点击触发事件,方法参数中可获取到该格的信息
setOption Function 实例化上的方法, 重新设置参数渲染表格,参数同上(没有el参数)1
进入开发: 最常用版本 直接替换 var courseList = [] 将里面组装数组，每个数组有7个元素，直接复用课表的模式。后台的拼接数据，第一个行的相关信息数据表示全部列的第一个数字，所以后端的存储格式$column [lie] [hang] 的二维数组。 对应的返回的数据格式:
每一行的数据对应了我们课表里面的每一行，而列也是对应了我们课表里面的列。改动的时间全部对应在列上面。
变种开发1: 是要查看每个课程的相关数据 左侧列表不再是刻度，而是每个课程。列表对应课程的班级 首先左侧的刻度要变掉，我们假设做一个三行 第三个课程比较多，占据了三列（每周排课最多的会显示列）
var courseType = [
[{name: '中国舞'}, 1],
[{name: '毛笔'}, 1],
[{name: '马术'}, 3],
];
然后通过课程数据:
var courseListOther = [ ["李老师,中国舞", "李老师,中国舞", "李老师,中国舞", "李老师,中国舞", "李老师,中国舞"], ["李老师,毛笔", "李老师,毛笔", "李老师,毛笔", "李老师,毛笔", "李老师,毛笔"], ["李老师,马术", "李老师,马术", "李老师,马术", "李老师,马术", "李老师,马术"], ["李老师,马术", '', "李老师,马术", "李老师,马术", "李老师,马术"], ["李老师,马术", "李老师,马术", '', "李老师,马术", "李老师,马术"], ];
我们要将每个写入的相同类型的数据，都赋值一个颜色。这样就可以确认可生成颜色是一样的。后台写入的数据逻辑:,生成一个逻辑二维数组，排序是 kecheng 星期几 第几节课 = 课程信息 然后每次写入一个数组到输出数组里面的时候，需要绑定一个格子的颜色（这样就变相的实现了每个格子的颜色是绑定的）
后端主要渲染的变量:
var Timetable = new Timetables({
el: '#coursesTable',
timetables: courseList, //渲染数据
week: week,
timetableType: courseType, //左侧的数据
merge: false,
highlightWeek: day,
gridOnClick: function (e) {
console.log(e);
},
styles: {
palette: {$kebiao.palette}, //渲染颜色
Gheight: 100
}
});
实现的主要效果图:
