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對象 |