JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库，功能包括：读取JSON数据、结果分页、对每个任务用不同颜色显示、使用一个简短的描述作为提示、标注节假日等。
jQuery的甘特图是一个简单的图表，实现甘特图功能作为一个jQuery组件。
JQuery.Gantt特点
ReadjsondataPagingsultsDisplaydiffentcoloursforeachtaskDisplayshortdescriptionashintsMarkholidays
JQuery.Gantt兼容性
jQuery.Gantt能够在下面的浏览器中运行
Fifox4+Chrome1+Safari5+Opera9+IE8+
使用JQuery.Gantt
首先我们需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中，然后在我们自己的页面中引用需要的资源文件。
CSS样式文件
linkl="stylesheet"hf="css/style.css"/
JS脚本文件
scriptsrc="js/jquery-1.7.min.js"/scriptscriptsrc="js/jquery.fn.gantt.js"charset="GB1"/scriptscriptsrc="js/jquery.cookie.js"/script
注：如果需要甘特图中显示中文，则需要在js文件引用中加上charset特性并设置为GB1，否则中文内容将显示为乱码。
页面布局
在需要显示甘特图的地方加入以下这个div。
divclass="gantt"/div
初始化插件
$(".selector").gantt({source:"ajax/data.json",scale:"weeks",minScale:"weeks",maxScale:"months",onItemClick:function(data){alert("Itemclicked-showsomedetails");},onAddClick:function(dt,rowId){alert("Emptyspaceclicked-addanitem!");},onRender:function(){console.log("chartnded");}});
配置参数
Source配置
source:[{name:"Example",desc:"Lomipsumdolorsitamet.",values:[...]}]
Value配置
values:[{to:"/Date()/",from:"/Date()/",desc:"Something",label:"ExampleValue",customClass:"ganttRed",dataObj:foo.bar[i]}]
代码说明
jquery.cookie.js
用于cookie管理，如果需要在甘特图中使用cookie则需要在页面中引用该js文件，否则不需要引用。
jquery.fn.gantt.js
代码结构解析
JQuery.Gantt组件的核心脚本文件，所有的甘特图功能代码都在这个文件中。
$.fn.gantt=function(options)：甘特图部件对象
基础设置项
cookieKey：cookie的键scales：时间范围的级别settings：部件设置集source：数据源itemsPerPage：分页的每页数据行数months：列头处月份名称dow：列头处星期名称startPos：默认开始位置日期navigate：底部导航，buttons为按钮式的，scroll为滑块式的scale：甘特图每一列的时间范围useCookie：是否使用cookie，如果使用需要引用jquery.cookie.jsmaxScale：最大时间范围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管理器（负责导航和渲染）：co
elementFromPoint：获取位于指定点的最高处的元素cate：创建图表init：初始化视图，计算行数、页数、可见的开始时间与结束时间nder：渲染gridleftPanel：创建左侧PaneldataPanel：创建右侧数据PanelrightPanel：创建右侧头部Panelnavigation：导航cateProgssBar：创建进度条markNow：移除”wd“class添加”today“class到当前的scale模式fillData：填充图表，解析数据并填充到panelnavigateTo：导航到navigatePage：导航到指定的页面zoomInOut：变更空间轴级次（zoom）mouseScroll：通过鼠标移动图表wheelScroll：通过鼠标滚轮移动图表sliderScroll：通过滑块控制图表scrollPanel：更新滚动panel的marginsynchronizeScroller：同步滚动positionLabel：重新定位数据标签waitToggle：切换等待
实用功能：tools
getMaxDate：返回最大可能的日期在scale值的标准下getMinDate：返回最小可能的日期在scale值的标准下parseDateRange：返回一个日期对象数组介于from和to之间，时间单位为天parseTimeRange：返回一个日期对象数组介于from和to之间，时间单位为小时parseWeeksRange：返回一个日期对象数组介于from和to，时间单位为周parseMonthsRange：返回一个日期对象数组介于from和to，时间单位为月dateDeserialize：从字符串反序列化成日期genId：用日期创建IDgetCellSize：获取当前单元格的大小getRightPanelSize：获取当前右panel的大小getPageHeight：获取当前页面的高度getProgssBarMargin：获取当前进度条的margin大小
选项扩展：this.each(function(){};);