特效与样式（5）——Timetables的使用

第一次使用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
    }
  });

实现的主要效果图: