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");
}
});
| 參數(shù) | 默認值 | 類型 | 說明 |
|---|---|---|---|
| source | null | Array, String (url) | 數(shù)據(jù)源：json數(shù)組或者返回json的url地址 |
| itemsPerPage | 7 | Number | 每頁顯示項目數(shù) |
| months | ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] | Array | 月份對應(yīng)的顯示字符 |
| dow | ["S", "M", "T", "W", "T", "F", "S"] | Array | 周日到周一的顯示字符 |
| navigate | "buttons" | String ("buttons","scroll") | 導(dǎo)航類型：按鈕和滾動條 |
| scale | "days" | String | 顯示單元 |
| maxScale | "months" | String | 視圖縮放最大單元 |
| minScale | "hours" | String | 視圖縮放最小單元 |
| waitText | "Please Wait..." | String | 加載時的提示文字 |
| onItemClick: | function (data) { return; } | 點擊時執(zhí)行的操作，參數(shù)是被點擊項目相關(guān)聯(lián)的數(shù)據(jù)對象 | |
| onAddClick | function (dt, rowId) { return; } | 在空白格子點擊時執(zhí)行的函數(shù) 第一個參數(shù)是點擊點對應(yīng)時間的毫秒數(shù)，第二個參數(shù)對象的id |
|
| onRender | function () { return; } | 甘特圖渲染完畢后執(zhí)行的操作 | |
| useCookie | false | 聲明是是否使用cookie記錄圖表的狀態(tài)（縮放單元、滾動條位置） 需要使用jquery.cookie.js才能使用該選項 |
|
| scrollToToday | true | Boolean | 是否滾動到當(dāng)天 |
Source Configuration 數(shù)據(jù)源配置格式
source: [{
name: "標(biāo)題",
desc: "描述.",
values: [ ... ]
}]
| 參數(shù) | 默認值 | 類型 | 說明 |
|---|---|---|---|
| name | null | String | 甘特圖左側(cè)顯示的每行所對應(yīng)的標(biāo)題——體文字部分 |
| desc | null | String | 左側(cè)說明的描述部分 |
| values | null | Array | 甘特圖單元所對應(yīng)的時間段等信息，在右側(cè)的單元格顯示 |
Value Configuration 數(shù)據(jù)源的json數(shù)值對
values: [{
to: "/Date(1328832000000)/",
from: "/Date(1333411200000)/",
desc: "鼠標(biāo)懸停時的描述文字",
label: "甘特圖項目標(biāo)題",
customClass: "ganttRed",
dataObj: foo.bar[i]
}]
| 參數(shù) | 類型 | 說明 |
|---|---|---|
| to | String (Date) | 結(jié)束時間（毫秒數(shù)，php返回時可以在時間戳后添加3個0） |
| from | String (Date) | 開始時間 |
| desc | String | 鼠標(biāo)懸停到項目上個的提示文字Text that appears on hover, I think? |
| label | String | 甘特圖項目的標(biāo)題文字 |
| customClass | String | 添加到甘特圖項目的自定義類，可以用來標(biāo)記甘特圖項目的顏色 |
| dataObj | All | 點擊時應(yīng)用到甘特圖項目的data對象 |