引用CSS和JS

使用EdoGantt是一件簡單輕松的事，首先我們在HTML頁面內(nèi)引用CSS和JS：

<!--edo css-->
<link href="http://www.cnblogs.com/scripts/edo/res/css/edo-all.css" rel="stylesheet" type="text/css" />
<link href="http://www.cnblogs.com/scripts/edo/res/product/project/css/project.css" rel="stylesheet"
type="text/css" />
<!--edo js-->
<script src="http://www.cnblogs.com/scripts/edo/edo.js" type="text/javascript"></script>

注意，請仔細檢查css和js的路徑是否正確。很多錯誤都只是CSS或JS路徑不對造成的。

創(chuàng)建EdoGantt

創(chuàng)建一個EdoGantt，需要兩大對象：

1.Edo.lists.Gantt? ：甘特圖顯示組件。負責(zé)界面顯示和操作。

2.Edo.data.DataGantt? ：甘特圖數(shù)據(jù)組件。負責(zé)數(shù)據(jù)修改。

我們在網(wǎng)頁上創(chuàng)建一個web gantt，來說明如何使用這兩個對象：

//創(chuàng)建一個Edo.data.DataGantt甘特圖數(shù)據(jù)對象
var dataGantt = new Edo.data.DataGantt(ganttData);
Edo.build({
id: 'gantt',
type: 'gantt', //甘特圖顯示組件
width: 700, //寬度
height: 350, //高度
startDate: new Date(2009, 0, 28), //甘特圖顯示開始日期
finishDate: new Date(2009, 1, 30), //甘特圖顯示截止日期
data: dataGantt, //將甘特圖數(shù)據(jù)對象,設(shè)置給甘特圖顯示組件
render: document.getElementById('view')
});

這里的ganttData數(shù)據(jù)對象，就是我們上一節(jié)教程“甘特圖數(shù)據(jù)結(jié)構(gòu)”中的甘特圖基礎(chǔ)數(shù)據(jù)對象，是一個普通的JS Array。

創(chuàng)建的甘特圖視圖如下：

創(chuàng)建標準甘特圖

使用Edo.lists.Gantt創(chuàng)建的甘特圖組件，只是一個條形圖視圖。

一般人們需要的甘特圖，是一個左側(cè)樹，右側(cè)條形圖的視圖。

EdoJS提供了一個強大的樹形組件:Edo.lists.Tree，來幫助我們實現(xiàn)一個標準的甘特圖。

標準甘特圖視圖如下：

關(guān)于如何使用Edo.lists.Tree，超出了本篇教程講述的范疇，您可以去EdoJS官方網(wǎng)站的教程中心學(xué)習(xí)了解。

這里有一個標準甘特圖的甘特圖例子可供參考。

調(diào)整甘特圖視圖日期范圍

Edo.lists.Gantt除data屬性外，還有兩個非常重要的屬性：startDate和finishDate。這兩個日期屬性，用來控制甘特圖的日期顯示范圍，如果任務(wù)的日期超出這個日期范圍，將不會顯示在甘特圖界面上。所以，如果想將所有任務(wù)顯示在甘特圖界面上，請將這兩個值，設(shè)置為所有任務(wù)的最小開始日期和最大完成日期。

用戶可以在創(chuàng)建甘特圖的時候，給startDate和finishDate賦值，也可以在創(chuàng)建甘特圖之后，參考如下代碼重新設(shè)置，便于實時調(diào)整甘特圖顯示日期范圍：

gantt.set('startDate', new Date(2009, 0, 28));
gantt.set('finishDate', new Date(2009, 1, 30));

用戶也可以在任何時刻重新設(shè)置甘特圖的數(shù)據(jù)對象，不斷刷新甘特圖數(shù)據(jù)內(nèi)容。

使用AJAX獲取數(shù)據(jù)

在實際使用中，用戶的甘特圖數(shù)據(jù)不會存放在靜態(tài)頁面內(nèi)，而是請求服務(wù)端的一個頁面服務(wù)，返回項目數(shù)據(jù)，這就需要使用一個數(shù)據(jù)交互組件：AJAX。

用戶可以使用自己屬性的AJAX組件，如果有需要，我們也提供了一個EdoJS AJAX組件，幫助用戶更方便進行數(shù)據(jù)交互操作。

這里有一個使用Ajax加載Json數(shù)據(jù)的甘特圖例子可供參考。

監(jiān)聽事件和數(shù)據(jù)操作

在“監(jiān)聽事件和數(shù)據(jù)操作”教程中，您可以學(xué)習(xí)怎么用EdoGantt來實現(xiàn)自己的項目管理功能邏輯。

自定義甘特圖外觀

在“自定義顯示外觀”教程中，您可以學(xué)習(xí)到如何將EdoGant修改成符合自己項目或產(chǎn)品需要的外觀。

轉(zhuǎn)載于:https://www.cnblogs.com/elise/archive/2010/04/27/1722149.html

總結(jié)

以上是生活随笔為你收集整理的强大js web甘特图制作之甘特图组件和数据对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。