jquery 甘特圖開發指南

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

<link rel="stylesheet" href="css/style.css" />
<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>　
 在須要顯示甘特圖的地方加入如下這個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 一個直接應用於甘特項的數據對象

代碼說明
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 () {};);

原文來自http://www.51diaodu.com/doc/1456

 

jquery甘特圖開發包下載地址http://www.51diaodu.com/pdt/1442

DEMO:http://www.51diaodu.com/demo/1442/SampleBrowser.htm