簡單步驟打造復(fù)雜WEB甘特圖

創(chuàng)建一個(gè) 易度甘特圖 ，需要有兩大對象：
1.Edo.project.GanttView ：甘特圖顯示組件
2.Edo.data.DataProject ：甘特圖數(shù)據(jù)組件
GanttView組件是一般意義上的易度甘特圖組件，它是一個(gè)界面顯示組件，是一個(gè)左側(cè)樹形任務(wù)，右側(cè)條形圖的組件。
DataProject是甘特圖數(shù)據(jù)組件，它提供了甘特圖顯示和操作邏輯的數(shù)據(jù)功能，是一個(gè)不可見的組件。
兩者配合，實(shí)現(xiàn)了一個(gè)完整的甘特圖應(yīng)用，
另外，不得不要說另一個(gè)關(guān)鍵的組件：Edo.util.Ajax。
我們的甘特圖數(shù)據(jù)，往往是以XML或JSON靜態(tài)方式存放在服務(wù)端，或者是以數(shù)據(jù)庫方式存放。我們在頁面顯示甘特圖的時(shí)候，需要從服務(wù)端把這些數(shù)據(jù)提取出來，生成一個(gè)DataProject數(shù)據(jù)對象，然后才能由GanttView正確顯示出來。
這里，Ajax負(fù)責(zé)在客戶端頁面，從服務(wù)端獲取數(shù)據(jù)提供給甘特圖顯示和操作，并且在甘特圖操作之后，把甘特圖數(shù)據(jù)，繼續(xù)以XML或JSON數(shù)據(jù)形式傳遞到服務(wù)端，更新進(jìn)數(shù)據(jù)庫的功能。
下面通過一個(gè)標(biāo)準(zhǔn)的范例，來說明在頁面上，創(chuàng)建一個(gè)易度甘特圖應(yīng)用的全過程：
首先，我們需要在頁面內(nèi)引用易度甘特圖的css和js：
<!--edogantt css-->
<link href="../scripts/edo/res/css/base.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/core.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/css/skin.css" rel="stylesheet" type="text/css" />
<link href="../scripts/edo/res/product/project/css/project.css" rel="stylesheet" type="text/css" />
<!--edogantt javascript-->
<script src="../scripts/edo/edo.js" type="text/javascript"></script>
注意：請仔細(xì)檢查css和js的路徑是否正確。
然后，我們就可以使用Ajax獲取甘特圖數(shù)據(jù)，創(chuàng)建DataProject，創(chuàng)建GanttView，最終生成一個(gè)WEB甘特圖應(yīng)用了：
var dataProject, project;

Edo.util.Dom.on(window, 'load', function(e){
//創(chuàng)建易度甘特圖組件
project = Edo.create({
type: 'ganttview',
width: 700,
height: 400,
render: document.getElementById('example-view')
});

//使用Ajax, 從服務(wù)端獲取甘特圖數(shù)據(jù)字符串
Edo.util.Ajax.request({
url: '../data/project.xml', //數(shù)據(jù)源地址: 請注意路徑
onSuccess: function(text){
//使用xml字符串創(chuàng)建Edo.data.DataProject數(shù)據(jù)對象
dataProject = new Edo.data.DataProject(text);

//dataProject設(shè)置給ganttview對象的data屬性即可顯示和操作
project.set('data', dataProject);
},
onFail: function(err){
alert("加載xml數(shù)據(jù)失敗,錯(cuò)誤碼:"+err);
}
});
});
以上是從服務(wù)端加載XML數(shù)據(jù)格式的范例，如果您加載的是JSON格式，參考如下代碼：
Edo.util.Ajax.request({
url: '../data/project.txt',
onSuccess: function(text){
//從json創(chuàng)建Edo.data.DataProject數(shù)據(jù)對象
var json = Edo.util.Json.decode(text);
dataProject = new Edo.data.DataProject(json.result);

project.set('data', dataProject);
},
onFail: function(err){
alert("加載xml數(shù)據(jù)失敗,錯(cuò)誤碼:"+err);
}
});
僅僅是在創(chuàng)建Edo.data.DataProject時(shí)的不同處理。
當(dāng)創(chuàng)建顯示易度甘特圖之后，易度甘特圖組件提供了一系列功能操作入口。如點(diǎn)擊任務(wù)樹單元格進(jìn)行編輯，鼠標(biāo)拖拽調(diào)整右側(cè)條形圖區(qū)域中任務(wù)的開始日期、完成日期和完成百分比，以及右鍵菜單中的“新增、刪除、修改、升級、降級”等任務(wù)操作功能。
注意！如果您創(chuàng)建顯示甘特圖之后，未監(jiān)聽處理甘特圖的任何事件，那么任務(wù)操作后的任務(wù)狀態(tài)將不會(huì)有任何改變，一切任務(wù)的操作結(jié)果，全部通過甘特圖事件，開放給用戶，由用戶監(jiān)聽并處理任務(wù)的操作后狀態(tài)。
就是說，易度甘特圖只是做了顯示和操作的功能封裝，但是對于操作結(jié)果，不加以干涉，完全交給用戶來控制。
比如，用戶在界面編輯修改了某一任務(wù)的完成日期，這時(shí)候會(huì)激發(fā)taskchange事件，用戶可以監(jiān)聽處理這個(gè)taskchange事件，得知：是哪個(gè)任 務(wù)，什么屬性，要改成什么樣的值。用戶可以簡單的直接設(shè)置給任務(wù)（參考甘特圖的任務(wù)操作篇），也可以經(jīng)過一系列復(fù)雜的數(shù)據(jù)邏輯計(jì)算和處理，從而判斷是否可 以修改，修改后，此任務(wù)關(guān)聯(lián)的其他任務(wù)的日期怎么聯(lián)動(dòng)處理等。
甘特圖數(shù)據(jù)處理，完全交給了開發(fā)者，使開發(fā)者對數(shù)據(jù)處理，有了100%的掌控。