JQuery.Gantt開發指南（轉）
說明
日前需要用到甘特圖，以下轉載內容源自網絡。
? 概述
1.JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴展功能的JS組件庫。
?前端頁面
o 資源引用
首先我們需要將下載到的源碼中的CSS、IMG、JS等資源放入我們自己的項目中，然後在我們自己的頁面中引用需要的資源文件。
CSS樣式文件：
<link rel="stylesheet" href="css/style.css" />JS腳本文件：
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js" 註：如果需要甘特圖中顯示中文，則需要在js文件引用中加上charset特性並設置為GB2312，否則中文內容將顯示為亂碼。
頁面布局：
在需要顯示甘特圖的地方加入以下這個div。
<div class="gantt"></div>?組件配置
Gantt 配置：
$(".selector").gantt({
source:"ajax/data.json",
scale | 參數 | 默認值 | 接收類型 |
|---|---|---|
| source | null | Array, String (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; } | 無數據範圍內的點擊事件 |
| onRender | function () { return; } | 渲染事件 |
| useCookie | FALSE | 如果需要使用cookie則需要引用JS腳本文件：jquery.cookie.js? |
| scrollToToday | TRUE | Boolean |
Source 配置：
source:[{
name:"Example",
desc:"Lorem ipsum dolor sit amet.",
values:[...]}]| 參數 | 默認值 | 接收類型 |
|---|---|---|
| name | null | String |
| desc | null | String |
| values | null | Array |
Value 配置：
values:[{
to:"/Date(1328832000000)/",from:"/Date(1333411200000)/",
desc:"Something",
label:"Example Value",
customClass:"ganttRed",
dataObj: foo.bar[i]}]| 參數 | 接收類型 | 解釋 |
|---|---|---|
| to | String (Date) | 結束時間，以毫秒為換算單位 |
| from | String (Date) | 開始時間，以毫秒為換算單位 |
| desc | String | 鼠標懸停顯示文本 |
| label | String | 甘特項顯示文本 |
| customClass | String | 甘特項的自定義class |
| dataObj | All | 一個直接應用於甘特項的數據對象 |
.NET平臺實現時間轉換：
public class GanttManager
{
public static readonly DateTime StartTime = TimeZone .CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)).Date;
public static List< GanttItem> DataToGanttList()
{
List<GanttItem > ls = new List<GanttItem >();
GanttItem item = new GanttItem();
item.name = "a";
item.desc = "b";
item.values.id = "1";
item.values.label = "c";
item.values.from = ToMillisecondDate( new DateTime (2011, 11, 2));
item.values.to = ToMillisecondDate( new DateTime (2011, 11, 3));
ls.Add(item);
ls.Add(item);
return ls;
}
public static string ToMillisecondDate( DateTime dt)
{
return "/Date(" + ((dt.Date - StartTime.Date).TotalSeconds * 1000).ToString() + ")/";
}
}?代碼說明：
jquery.cookie.js：
用於cookie管理，如果需要在甘特圖中使用cookie則需要在頁面中引用該js文件，否則不需要引用。
jquery.fn.gantt.js：
JQuery.Gantt組件的核心腳本文件，所有的甘特圖功能代碼都在這個文件中。
代碼結構解析：
$.fn.gantt = function (options)：甘特圖部件對象
基礎屬性：
cookieKey：cookie的鍵
scales：時間範圍的級別
settings：部件設置集
source：數據源
itemsPerPage：分頁的每頁數據行數
months：列頭處月份名稱
dow：列頭處星期名稱
startPos：默認開始位置日期
navigate：底部導航，buttons為按鈕式的，scroll為滑塊式的
scale：甘特圖每一列的時間範圍
useCookie：是否使用cookie，如果使用需要引用jquery.cookie.js
maxScale：最大時間範圍
minScale：最小時間範圍
waitText：等待提示文本
onItemClick：有數據範圍內點擊事件
onAddClick：無數據範圍內點擊事件
onRender：渲染事件
scrollToToday：設置是否滾動到今天
自定義選擇器方法（a：元素，i：索引，m：值）： $.extend($.expr[":"], {});
findday：以毫秒為時間單位匹配一個指定的日期
findweek：以毫秒為時間單位匹配一個指定的周
findmonth：以毫秒為時間單位匹配一個指定的月
日期對象擴展方法：
Date.prototype.getWeekId：獲取weekid用於標識week的div的id特性，返回字符串，格式為dh-YYYY-WW，其中的ww是一年中的第幾周
Date.prototype.genRepDate：按部件設置屬性中scale的值獲取時間範圍，以秒為時間單位
Date.prototype.getDayOfYear：獲取日期在一年中的第幾天
Date.prototype.getWeekOfYear：獲取日期在一年中的第幾周
Date.prototype.getDaysInMonth：獲取日期所在月份的天數
Date.prototype.hasWeek：如果日期駐留在一周的邊界，返回真
Date.prototype.getDayForWeek：返回一周的開始日期的日期對象
Grid管理器（負責導航和渲染）：core
elementFromPoint：獲取位於指定點的最高處的元素
create：創建圖表
init：初始化視圖，計算行數、頁數、可見的開始時間與結束時間
render：渲染grid
leftPanel：創建左側Panel
dataPanel：創建右側數據Panel
rightPanel：創建右側頭部Panel
navigation：導航
createProgressBar：創建進度條
markNow：移除”wd“class添加”today“class到當前的scale模式
fillData：填充圖表，解析數據並填充到panel
navigateTo：導航到
navigatePage：導航到指定的頁面
zoomInOut：變更空間軸級次（zoom）
mouseScroll：通過鼠標移動圖表
wheelScroll：通過鼠標滾輪移動圖表
sliderScroll：通過滑塊控制圖表
scrollPanel：更新滾動panel的margin
synchronizeScroller：同步滾動
repositionLabel：重新定位數據標簽
waitToggle：切換等待
實用工具類功能：tools
getMaxDate：返回最大可能的日期在scale值的標準下
getMinDate：返回最小可能的日期在scale值的標準下
parseDateRange：返回一個日期對象數組介於from和to之間，時間單位為天
parseTimeRange：返回一個日期對象數組介於from和to之間，時間單位為小時
parseWeeksRange：返回一個日期對象數組介於from和to，時間單位為周
parseMonthsRange：返回一個日期對象數組介於from和to，時間單位為月
dateDeserialize：從字符串反序列化成日期
genId：用日期創建ID
getCellSize：獲取當前單元格的大小
getRightPanelSize：獲取當前右panel的大小
getPageHeight：獲取當前頁面的高度
getProgressBarMargin：獲取當前進度條的margin大小
甘特圖組件對象遍歷器（負責執行初始化操作）：this.each(function () {};);
JQuery.Gantt開發指南（轉）