JQuery.Gantt（甘特圖）開發

一、簡介

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

 

 二、前端頁面

 2.1 資源引用

    首先需要將下載到的源碼中的CSS、IMG、JS等資源放入我們自己的項目中，然后在我們自己的頁面中引用需要的資源文件。

 CSS樣式文件

<link rel="stylesheet" href="css/style.css" />

 JS腳本文件

<script src="js/jquery-1.8.2.min.js"></script>

<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>

<script src="js/jquery.cookie.js"></script> //任務甘特圖中沒有使用cookies所以不需要引用jquery.cookie.js。

 

備注：

      1.jquery.cookie.js  用於cookie管理，如果在甘特圖中使用cookie則要在頁面 中引用該js文件，否則不需要。任務甘特圖中沒有使用cookies所以不需要引用

      2.jquery.fn.gantt.js  JQuery.Gantt組件的核心腳本文件，所有的甘特圖功能代碼都在這個文件中。

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

 

 

 

 2.2 頁面布局

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

<div class="gantt"></div>  //用於顯示甘特圖（如果不更改源碼的話此div的class要為“gantt” 建議不要修改此calss名字，如果修改的話，css與js中都要做相應的修改。）

 

 三、組件配置

 

 3.1 Gantt 配置

 

$(".selector").gantt({

        source:"ajax/task.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

 

 

 3.2 Source 配置

 

source:[{

        name:"Example",

        desc:"Lorem ipsum dolor sit amet.",

        values:[...]}]

參數	默認值	接收類型	備注
name	null	String	每一行最左側的一列以粗體顯示
desc	null	String	每一行左側第二列
values	null	Array	甘特圖日期范圍項

 

 

 3.3 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	一個直接應用於甘特項的數據對象

 

 

3.4 代碼結構解析：

 

 $.fn.gantt = function (options)：甘特圖部件對象

 基礎設置項

 cookieKey：cookie的鍵

 scales：時間范圍的級別 例如：["hours", "days", "weeks", "months"]

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