TimeSheet:一个用于时间规划的jQuery插件

拈花ヽ惹草 提交于 2020-04-10 10:10:21

设计思想

基于面向对象的设计思想。

源代码分3个部分:

  1. 单元格类--CSheetCell

  2. 表格类--CSheet

  3. 插件主体


单元格类--CSheetCell

私有成员:

state -- 单元格的状态,只能取值 0 或 1,默认 0;

toggleCallback(state) -- 改变单元格状态时的回调函数,默认 false;

settingCallback() -- 设置单元格状态时的回调函数,默认 false;

公有成员:

toggle() -- 改变单元格的状态;

set(state) -- 设置单元格状态为指定值;

get() -- 获取单元格状态;


表格类--CSheet

私有成员:

dimensions -- 表格的维度,二元数组,[行数,列数],默认 undefined;

sheetData -- 表格的数据,二维数组,默认 undefined

toggleCallback() -- 改变指定区域状态时的回调函数,默认 false;

settingCallback() -- 设置指定区域状态时的回调函数,默认 false;

cells -- 表格所持有的 CSheetCell 实例,二维数组,与 sheetData 元素一 一对应;

initCells() -- 使用 sheetData 初始化 cells;

areaOperate(area, opt) -- 选定一个区域,对其执行 toggle 或 set 操作;

公有成员:

toggle(area) -- 改变指定区域内单元格的状态;

set(state, area) -- 设置指定区域内单元格状态为指定值;

getCellState(cellIndex) -- 获取指定单元格状态;

getRowStates(rowIndex) -- 获取指定行所有单元格状态;

getSheetStates() -- 获取整个表格所有单元格状态;


插件主体

CSheetCell 与 CSheet 封装了一些数据和方法以方便插件的实现。在使用场合,CSheetCell 与 CSheet 对用户是不可见的,API 最终由插件主体提供。

open API:

getCellState(cellIndex) -- 获取单元格状态,封装了 CSheet :: getCellState;

getRowStates(rowIndex) -- 获取指定行所有单元格状态,封装了 CSheet :: getRowStates;

getSheetStates() -- 获取整个表格所有单元格状态封装了 CSheet :: getSheetStates

setRemark(row, text) -- 设置指定行的说明文字;

clean() -- 将表格重置为未设置状态;

disable() -- 禁止操作表格;

enable() -- 允许操作表格;

isFull() -- 判断表格是否所有单元格状态都是1;

getDefaultRemark() -- 获取行注释的默认值


开源项目

项目地址:https://github.com/lbbc1117/TimeSheet

也可以在这里下载源码: http://www.oschina.net/code/snippet_1047422_50906

演示视频:http://v.youku.com/v_show/id_XMTMzNzcxMzI0NA==.html

选择超清模式看的更清楚。

源码中提供了样例,展示了 TimeSheet 所有主要功能:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!