引用CSS和JS

使用EdoGantt是一件簡(jiǎn)單輕松的事，首先我們?cè)贖TML頁(yè)面內(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>

注意，請(qǐng)仔細(xì)檢查css和js的路徑是否正確。很多錯(cuò)誤都只是CSS或JS路徑不對(duì)造成的。

創(chuàng)建EdoGantt

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

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

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

我們?cè)诰W(wǎng)頁(yè)上創(chuàng)建一個(gè)web gantt，來(lái)說(shuō)明如何使用這兩個(gè)對(duì)象：

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

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

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

創(chuàng)建標(biāo)準(zhǔn)甘特圖

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

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

EdoJS提供了一個(gè)強(qiáng)大的樹(shù)形組件:Edo.lists.Tree，來(lái)幫助我們實(shí)現(xiàn)一個(gè)標(biāo)準(zhǔn)的甘特圖。

標(biāo)準(zhǔn)甘特圖視圖如下：

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

這里有一個(gè)標(biāo)準(zhǔn)甘特圖的甘特圖例子可供參考。

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

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

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

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

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

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

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

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

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

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

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

自定義甘特圖外觀

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

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

總結(jié)

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

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