JQuery.Gantt（甘特圖） 開發指南

 

• 概述

     JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴展功能的JS組件庫。

 

 

• 源碼下載

     http://download.csdn.net/detail/aaakingwin/5550401

• 前端頁面
• • 資源引用

     首先我們需要將下載到的源碼中的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" charset ="GB2312"></script>

<script src="js/jquery.cookie.js"></script>

     

     注：如果需要甘特圖中顯示中文，則需要在js文件引用中加上charset特性並設置為GB2312，否則中文內容將顯示為亂碼。

• • 頁面布局

     在需要顯示甘特圖的地方加入以下這個div。

<div class="gantt"></div>

• 組件配置
• • Gantt 配置

$(".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)
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	一個直接應用於甘特項的數據對象

 

注：其中from和to的時間為毫秒數，例如： /Date(1320192000000)/，計算方式為時間變量減去時間初始值（1970-1-1）的差值換算為毫秒

•  .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 () {};);