jQuery.Gantt是一个基于jQuery的甘特图绘制插件，功能强大，操作简单。
Gantt Configuration 甘特图基本配置
$(".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) | 数据源：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对象 |