JQuery.Gantt(甘特图) 开发指南
来源:互联网 发布:淘宝金利来旗舰店真假 编辑:程序博客网 时间:2024/06/05 20:49
JQuery.Gantt(甘特图) 开发指南
一、简介
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。
二、前端页面
2.1 资源引用
首先需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引用需要的资源文件。
CSS样式文件
<link rel="stylesheet" href="css/style.css" />
JS脚本文件
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script src="js/jquery.cookie.js"></script> //任务甘特图中没有使用cookies所以不需要引用jquery.cookie.js。
备注:
1.jquery.cookie.js 用于cookie管理,如果在甘特图中使用cookie则要在页面 中引用该js文件,否则不需要。任务甘特图中没有使用cookies所以不需要引用
2.jquery.fn.gantt.js JQuery.Gantt组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。
3.如果需要甘特图中显示中文,则需要在js文件引用中加上charset特性并设置为GB2312,否则中文内容将显示为乱码。
2.2 页面布局
在需要显示甘特图的地方加入以下这个div。
<div class="gantt"></div> //用于显示甘特图(如果不更改源码的话此div的class要为“gantt” 建议不要修改此calss名字,如果修改的话,css与js中都要做相应的修改。)
三、组件配置
3.1 Gantt 配置
$(".selector").gantt({
source:"ajax/task.json",
scale:"weeks",
minScale:"weeks",
maxScale:"months",
onItemClick:function(data){
alert("Item clicked - show some details");},
onAddClick:function(dt, rowId){
alert("Empty space clicked - add an item!");},
onRender:function(){
console.log("chart rendered");}});
参数
默认值
接收类型
source
null
Array, String (url)
itemsPerPage
7
Number
months
["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
Array
dow
["S", "M", "T", "W", "T", "F", "S"]
Array
navigate
"buttons"
String ("buttons","scroll")
scale
"days"
String
maxScale
"months"
String
minScale
"hours"
String
waitText
"Please Wait..."
String
onItemClick:
function (data) { return; }
有数据范围内的点击事件
onAddClick
function (dt, rowId) { return; }
无数据范围内的点击事件
onRender
function () { return; }
渲染事件
useCookie
false
如果需要使用cookie则需要引用JS脚本文件:
jquery.cookie.js
scrollToToday
true
Boolean
3.2 Source 配置
source:[{
name:"Example",
desc:"Lorem ipsum dolor sit amet.",
values:[...]}]
参数
默认值
接收类型
备注
name
null
String
每一行最左侧的一列以粗体显示
desc
null
String
每一行左侧第二列
values
null
Array
甘特图日期范围项
3.3 Value 配置
values:[{
to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
desc:"Something",
label:"Example Value",
customClass:"ganttRed",
dataObj: foo.bar[i]}]
参数
接收类型
备注
to
String (Date)
结束时间,以毫秒为换算单位
from
String (Date)
开始时间,以毫秒为换算单位
desc
String
鼠标悬停显示文本
label
String
甘特项显示文本
customClass
String
甘特项的自定义class
dataObj
All
一个直接应用于甘特项的数据对象
3.4 代码结构解析:
$.fn.gantt = function (options):甘特图部件对象
基础设置项
cookieKey:cookie的键
scales:时间范围的级别 例如:["hours", "days", "weeks", "months"]
settings:部件设置集
source:数据源
itemsPerPage:分页的每页数据行数
months:列头处月份名称
dow:列头处星期名称
startPos:默认开始位置日期
navigate:底部导航,buttons为按钮式的,scroll为滑块式的
scale:甘特图每一列的时间范围
useCookie:是否使用cookie,如果使用需要引用jquery.cookie.js
maxScale:最大时间范围
minScale:最小时间范围
waitText:等待提示文本
onItemClick:有数据范围内点击事件
onAddClick:无数据范围内点击事件
onRender:渲染事件
scrollToToday:设置是否滚动到今天
选择器方法(a:元素,i:索引,m:值): $.extend($.expr[":"], {});
findday:以毫秒为时间单位匹配一个指定的日期
findweek:以毫秒为时间单位匹配一个指定的周
findmonth:以毫秒为时间单位匹配一个指定的月
日期原型
Date.prototype.getWeekId:获取weekid用于标识week的div的id特性,返回字符串,格式为dh-YYYY-WW,其中的ww是一年中的第几周
Date.prototype.genRepDate:按部件设置属性中scale的值获取时间范围,以秒为时间单位
Date.prototype.getDayOfYear:获取日期在一年中的第几天
Date.prototype.getWeekOfYear:获取日期在一年中的第几周
Date.prototype.getDaysInMonth:获取日期所在月份的天数
Date.prototype.hasWeek:如果日期驻留在一周的边界,返回真
Date.prototype.getDayForWeek:返回一周的开始日期的日期对象
Grid管理器(负责导航和渲染):core
elementFromPoint:获取位于指定点的最高处的元素
create:创建图表
init:初始化视图,计算行数、页数、可见的开始时间与结束时间
render:渲染grid
leftPanel:创建左侧Panel
dataPanel:创建右侧数据Panel
rightPanel:创建右侧头部Panel
navigation:导航
createProgressBar:创建进度条
markNow:移除”wd“class添加”today“class到当前的scale模式
fillData:填充图表,解析数据并填充到panel
navigateTo:导航到
navigatePage:导航到指定的页面
zoomInOut:变更空间轴级次(zoom)
mouseScroll:通过鼠标移动图表
wheelScroll:通过鼠标滚轮移动图表
sliderScroll:通过滑块控制图表
scrollPanel:更新滚动panel的margin
synchronizeScroller:同步滚动
repositionLabel:重新定位数据标签
waitToggle:切换等待
实用功能:tools
getMaxDate:返回最大可能的日期在scale值的标准下
getMinDate:返回最小可能的日期在scale值的标准下
parseDateRange:返回一个日期对象数组介于from和to之间,时间单位为天
parseTimeRange:返回一个日期对象数组介于from和to之间,时间单位为小时
parseWeeksRange:返回一个日期对象数组介于from和to,时间单位为周
parseMonthsRange:返回一个日期对象数组介于from和to,时间单位为月
dateDeserialize:从字符串反序列化成日期
genId:用日期创建ID
getCellSize:获取当前单元格的大小
getRightPanelSize:获取当前右panel的大小
getPageHeight:获取当前页面的高度
getProgressBarMargin:获取当前进度条的margin大小
选项扩展:this.each(function () {};);
- JQuery.Gantt(甘特图) 开发指南
- JQuery.Gantt(甘特图) 开发指南
- JQuery.Gantt(甘特图) 开发指南
- JQuery.Gantt(甘特图) 开发指南
- JQuery.Gantt(甘特图) 开发指南 , 附下载资源
- JS甘特图 JQuery.Gantt
- Jquery 甘特图 插件 jQuery.Gantt
- jQuery甘特图插件jQuery.Gantt
- Gantt(甘特图)
- jquery 甘特图开发指南
- jQuery Gantt Chart jQuery图表插件,可以实现甘特图
- JQuery Gantt Chart
- 开发要准备的资料和工具之——gantt(甘特图)
- 甘特图(Gantt chart)深度解析
- 对jquery-gantt的应用
- Gantt(甘特图)控件发布
- jQuery插件开发指南
- jQuery Mobile开发指南
- mapreduce的一般运行步骤
- 第十一周项目1-储存班长信息的学生类(private)
- Hadoop2.2.0+HBase.96+Hive0.12配置详细过程整理
- [编程挑战]彩色石子,仅供参考
- android 4.4的耳机插入检测流程
- JQuery.Gantt(甘特图) 开发指南
- 温故而知新
- 第一章:随机事件的概率
- 认知http响应头
- 【综述】(MIT博士)林达华老师-“概率模型与计算机视觉
- struts2 尚学堂 1 Action
- 为何智能路由器们要用开源系统?
- 利用MapReduce计算框架实现谷歌(PR值)PageRank算法并行实现
- 打印服务器返回数据 NSURLConnectionDelegate