TimeSheet
A jQuery plugin for time planning
Get Start
It is simple to use TimeSheet:
// TimeSheet has to be binded on a TBODY element var sheet = $("#aTbodyElement").TimeSheet({ data: { dimensions : [2,3], colHead : [{name:"00",title:"00:00"},{name:"01",title:"01:00"},{name:"02",title:"02:00"}], rowHead : [{name:"2015-09-01"},{name:"2015-09-02"}], sheetHead : {name:"日期\\时间"}, sheetData : [[0,1,1],[1,1,1]] } });TimeSheet.js relies on jQuery, so jQuery must be included in your page before TimeSheet.js.
<script type="text/javascript" src="/your/path/to/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="/your/path/to/TimeSheet.js"></script>There is a css file TimeSheet.css, and it is necessary but can be partially customized to change the looking.
Initialization
Initial options:
/* TimeSheet should be binded on element TBODY, and its subelements have some default classes as follow: * * sheetHead ---- class: .TimeSheet-head * colHead ---- class: .TimeSheet-colHead * rowHead ---- class: .TimeSheet-rowHead * cell ---- class: .TimeSheet-cell */ options : { data : { dimensions : ..., colHead : ..., rowHead : ..., sheetHead : ..., sheetData : ... }, // optional options sheetClass : "", start : function(ev){...}, end : function(ev){...}, remarks : false }To specify the row numbers and the column numbers:
data : { dimensions : [2,3] //[row,column] }To specify the column headers:
data : { //"name" is to set the text shown in the header. //"title" is to set the text shown when the header is hovered. //"style" is css code to customize the style of the header. colHead : [ {name:"name1",title:"",style:"width,background,color,font"}, {name:"name2",title:"",style:"width,background,color,font"},... ] }Row headers shall be initialized the same way.
To specify the sheet header:
data : { //"name" is to set the text shown in the header. //"style" is css code to customize the style of the header. sheetHead : {name:"headName",style:"width,height,background,color,font"} }To initialize the sheet data:
It is a 2D, row-major ordered array. The value of it's basic elements has to be 0 or 1.
data : { sheetData : [[0,1,1,0,0],[...],[...],...] }Add class to sheetHead:
sheetClass : "userAddedClass"Specify a callback for starting selecting event:
start : function(ev){ //... }Specify a callback for ending selecting event:
/* * @param ev * @param selectedArea : the index of the top-left cell and the bottom-right cell -- {topLeft:[0,1], bottomRight:[2,2]} * */ end : function(ev, selectedArea){ //... }Init remarks area:
remarks : { title : "说明", // The remarks header default : "未设置" // The default text of row remark },API
Get the state of a single cell:
/* * 获取单元格状态 * @param cellIndex ：[1,2] * @return : 0 or 1 * */ sheet.getCellState([0,0]);Get the states of a single row:
/* * 获取某行所有单元格状态 * @param row ：2 * @return : [1,0,0,...,0,1] * */ sheet.getRowStates(2);Get the states of whole sheet:
/* * 获取表格所有单元格状态 * @return : [[1,0,0,...,0,1],[1,0,0,...,0,1],...,[1,0,0,...,0,1]] * */ sheet.getSheetStates();Set the remark text of a single row:
/* * 设置某行的说明文字 * @param row : 2, * @param text : '说明' * */ sheet.setRemark(2,"说明");Clean the sheet (set all cells to 0):
sheet.clean();Disable the sheet:
sheet.disable();Enable the sheet:
sheet.enable();Check if the sheet is full:
/* * 判断表格是否所有单元格状态都是1 * @return ： true or false * */ sheet.isFull();Get the default remark text:
sheet.getDefaultRemark();Example
A file example.html is offered to show the main functions of TimeSheet.js. Just download this whole project and unzip it, and open this html file in your browser. And a demo video is available at TimeSheet Demo
