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