Jquery 甘特图插件 jQuery Gantt

最新推荐文章于 2026-05-14 14:28:56 发布

原创最新推荐文章于 2026-05-14 14:28:56 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何利用jQuery Gantt插件创建甘特图，包括Source Configuration和Value Configuration的数据源配置，同时提供了老师的免费人工智能教程链接。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

http://taitems.github.io/jQuery.Gantt/

参数	默认值	类型	说明
source	null	Array, String (url)	数据源：json数组或者返回json的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; }		在空白格子点击时执行的函数第一个参数是点击点对应时间的毫秒数，第二个参数对象的id
onRender	function () { return; }		甘特图渲染完毕后执行的操作
useCookie	false		声明是是否使用cookie记录图表的状态（缩放单元、滚动条位置）需要使用jquery.cookie.js才能使用该选项
scrollToToday	true	Boolean	是否滚动到当天

Source Configuration 数据源配置格式

source: [{ name: "标题", desc: "描述.", values: [ ... ]}]

参数	默认值	类型	说明
name	null	String	甘特图左侧显示的每行所对应的标题——体文字部分
desc	null	String	左侧说明的描述部分
values	null	Array	甘特图单元所对应的时间段等信息，在右侧的单元格显示

Value Configuration 数据源的json数值对

values: [{ to: "/Date(1328832000000)/", from: "/Date(1333411200000)/", desc: "鼠标悬停时的描述文字", label: "甘特图项目标题", customClass: "ganttRed", dataObj: foo.bar[i]}]

参数	类型	说明
to	String (Date)	结束时间（毫秒数，php返回时可以在时间戳后添加3个0）
from	String (Date)	开始时间
desc	String	鼠标悬停到项目上个的提示文字Text that appears on hover, I think?
label	String	甘特图项目的标题文字
customClass	String	添加到甘特图项目的自定义类，可以用来标记甘特图项目的颜色
dataObj	All	点击时应用到甘特图项目的data对象

$(function() {   "use strict";   $(".gantt").gantt({    source: [{     name: "Sprint 0",     desc: "Analysis",     values: [{      from: "/Date(1320192000000)/",      to: "/Date(1322401600000)/",      label: "Requirement Gathering",      customClass: "ganttRed"     }]    },{     name: " ",     desc: "Scoping",     values: [{      from: "/Date(1322611200000)/",      to: "/Date(1323302400000)/",      label: "Scoping",      customClass: "ganttRed"     }]    },{     name: "Sprint 1",     desc: "Development",     values: [{      from: "/Date(1323802400000)/",      to: "/Date(1325685200000)/",      label: "Development",      customClass: "ganttGreen"     }]    },{     name: " ",     desc: "Showcasing",     values: [{      from: "/Date(1325685200000)/",      to: "/Date(1325695200000)/",      label: "Showcasing",      customClass: "ganttBlue"     }]    },{     name: "Sprint 2",     desc: "Development",     values: [{      from: "/Date(1326785200000)/",      to: "/Date(1325785200000)/",      label: "Development",      customClass: "ganttGreen"     }]    },{     name: " ",     desc: "Showcasing",     values: [{      from: "/Date(1328785200000)/",      to: "/Date(1328905200000)/",      label: "Showcasing",      customClass: "ganttBlue"     }]    },{     name: "Release Stage",     desc: "Training",     values: [{      from: "/Date(1330011200000)/",      to: "/Date(1336611200000)/",      label: "Training",      customClass: "ganttOrange"     }]    },{     name: " ",     desc: "Deployment",     values: [{      from: "/Date(1336611200000)/",      to: "/Date(1338711200000)/",      label: "Deployment",      customClass: "ganttOrange"     }]    },{     name: " ",     desc: "Warranty Period",     values: [{      from: "/Date(1336611200000)/",      to: "/Date(1349711200000)/",      label: "Warranty Period",      customClass: "ganttOrange"     }]    }],    navigate: "scroll",    maxScale: "hours",    itemsPerPage: 10,    onItemClick: function(data) {     alert("Item clicked - show some details");    },    onAddClick: function(dt, rowId) {     alert("Empty space clicked - add an item!");    },    onRender: function() {     if (window.console && typeof console.log === "function") {      console.log("chart rendered");     }    }   });   $(".gantt").popover({    selector: ".bar",    title: "I'm a popover",    content: "And I'm the content of said popover.",    trigger: "hover"   });   prettyPrint();  });