JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script src="js/jquery.cookie.js"></script>
在需要显示甘特图的地方加入以下这个div。
<div class="gantt"></div>
组件配置
Gantt 配置
$(".selector").gantt({ source:"ajax/data.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
Source 配置
source:[{ name:"Example", desc:"Lorem ipsum dolor sit amet.", values:[...]}]
参数 默认值 接收类型 解释
name null String 每一行最左侧的一列以粗体显示
desc null String 每一行左侧第二列
values null Array 甘特图日期范围项
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 一个直接应用于甘特项的数据对象
代码说明
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.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 () {};);
原文来自http://www.51diaodu.com/doc/1456
jquery甘特图开发包下载地址http://www.51diaodu.com/pdt/1442
相关推荐
ext2.0 甘特图 开发手册 参照文档中的例子 可以很快的开发处一个简单的甘特图
*基于jQuery 3.2 * MIT许可:您可以在任何地方重复使用 * JSON导入导出 *国际化 *管理任务状态 - >项目工作流程 *管理依赖项 *管理任务(资源,角色工作) *服务器同步就绪 *完全撤消 - 重做支持 *跨浏览器(至少...
jquery甘特图最新版本,英文原版,整合外链js。
此实例包含三个:jquery.ganttView-master、mbielanczuk-jQuery.Gantt-v1.1.0、thegrubbsian-jquery.ganttView-0.8.2.0
jquery甘特图插件开源,比较美观,简单易用
jquery 甘特图插件,有已用时间阴影,有实际与计划时间对比,有审核节点显示。自开发插件,可二次开发,可定制。
jQuery甘特图日程图横道图插件
EXTJS GANTT CHART,EXTJS甘特图的开发指南。
jquery开发甘特图,有实例,需求分析,实现,显示简单的甘特图展示.
ganttView的甘特图可视化插件,貌似只支持显示,不支持在线编辑,可以一起研究。 jQuery.ganttView The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain ...
jQuery实现的甘特图的控件,方便开发基于cloud的项目管理软件
亲测可以运行,免费资源可下载后一起研究如何使用,可集成Extjs
Ext甘特图官方开发指南 官方好像没有找到下载链接 本人手动拷贝 仅供本人学习使用 版权所有那个啥啥啥
jquery-gantt:轻量级的jQuery甘特图插件
甘特图+jquery实现可右键修改数据的甘特图.rar 甘特图+jquery实现可右键修改数据的甘特图.rar 甘特图+jquery实现可右键修改数据的甘特图.rar
手册包括ExtJS甘特图的新手入门、组件体系结构及使用、ExtJS 甘特图中各功能的使用方法及示例应用等,是一个非常适合新手的 ExtJS甘特图入门手册。本手册主要是针对ExtJS甘特图1.8 进行介 绍,全部代码、截图等都是...
jquery的甘特图代码,免费的版本。1.22的版本
jQueryGantt 是基于 jQuery 的,用于创建 Gratts,任务树,输出的 JSON 格式的数据的依赖。它提供了就地编辑、缩放等功能。
jquery 甘特图 支持的浏览器:Chrome、IE8、IE9、IE11、Firefox
初学时网上一通搜索下载,结果资源不是太旧就是不能用,后来还是从官网上下载,2017-09-21上传最新版本代码