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();
});