甘特图

甘特图数据结构EdoGantt只需要一个简单的JSON数据结构，就可以创建并显示一个web gantt。

如下所示：[{UID: 1, //唯一标识符Name: 'task1', //任务名称Start: new Date(2009, 1, 2), //开始日期Finish: new Date(2009, 1, 5), //完成日期Critical: 1, //关键任务PercentComplete: 80, //完成百分比Baseline: [ //比较基准{Start: new Date(2009, 1, 2),Finish: new Date(2009, 1, 3),Duration: 123}]},{UID: 2,Name: 'task2',Start: new Date(2009, 1, 2),Finish: new Date(2009, 1, 3),Critical: 1,PercentComplete: 80,Summary: 1, //摘要children: [{UID: 3,Name: 'task3',Milestone: 1, //里程碑PercentComplete: 100,Start: new Date(2009, 1, 3),Finish: new Date(2009, 1, 3),PredecessorLink: [ //前置任务{PredecessorUID: 1, //前置任务UIDType: 1 //任务相关性类型}]}]}]甘特图显示的是一个任务树状结构，每个节点就是一个任务，任务属性描述如下：UID：（必须）String。

唯一标识符。

是一个任意的字符串或数字，确保任务UID 不重复。

Name：（必须）String。

任务名称。

Start：（必须）Date。

开始日期。

Finish：（必须）Date。

完成日期。

PercentComplete：（必须）Number(0~100)。

完成百分比。

显示为上下居中的进度条。

PredecessorLink：（非必须）Array。

前置任务。

任务跟任务之间的可以有四种关系：完成-完成(FF) 0，完成-开始(FS) 1，开始-完成(SF) 2，开始-开始(SS) 3。

当有前置任务时，根据不同的任务相关性类型，将会显示四种不同的任务箭头连线。

Summary：（非必须）Number(0或1)。

摘要任务。

当一个任务下有子任务的时候，这个任务就是摘要任务，当Summary为1时，此任务会两端黑色箭头显示。

Critical：（非必须）Number(0或1)。

关键任务。

当Milestone为1时，显示一个红色条形图。

Milestone：（非必须）Number(0或1)。

里程碑。

当Milestone为1时，显示一个菱形图标。

Baseline：（非必须）Array。

比较基准。

用于对比显示实际任务日期和计划日期。

当gantt显示组件viewMode为“track”时，显示上下两个任务条形图。

使用以上的示例数据，生成的EdoGantt界面如下：EdoGantt只要求一个极其精简的基本数据结构，不关心用户的数据从何而来。

用户可以任意组织存储自己的项目数据，无论是服务端是.NET还是JAVA，无论数据库是ORACLE还是MYSQL，无论数据传输方式是JSON还是XML，只需要在创建甘特图的时候，提供一个符合EdoGantt基础数据结构的JS对象，就可以正常使用EdoGantt，开发自己的项目管理系统。

引用CSS和JS使用EdoGantt是一件简单轻松的事，首先我们在HTML页面内引用CSS和JS：<!--edo css--><link href="../../scripts/edo/res/css/edo-all.css" rel="stylesheet" type="text/css" /><link href="../../scripts/edo/res/product/project/css/project.css" rel="stylesheet"type="text/css" /><!--edo js--><script src="../../scripts/edo/edo.js"type="text/javascript"></script>注意，请仔细检查css和js的路径是否正确。

很多错误都只是CSS或JS路径不对造成的。

创建EdoGantt创建一个EdoGantt，需要两大对象：1.Edo.lists.Gantt ：甘特图显示组件。

负责界面显示和操作。

2.Edo.data.DataGantt ：甘特图数据组件。

负责数据修改。

我们在网页上创建一个web gantt，来说明如何使用这两个对象：//创建一个Edo.data.DataGantt甘特图数据对象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, //将甘特图数据对象,设置给甘特图显示组件render: document.getElementById('view')});这里的ganttData数据对象，就是我们上一节教程“甘特图数据结构”中的甘特图基础数据对象，是一个普通的JS Array。

创建的甘特图视图如下：创建标准甘特图使用Edo.lists.Gantt创建的甘特图组件，只是一个条形图视图。

一般人们需要的甘特图，是一个左侧树，右侧条形图的视图。

EdoJS提供了一个强大的树形组件:Edo.lists.Tree，来帮助我们实现一个标准的甘特图。

标准甘特图视图如下：监听处理甘特图事件当我们创建并显示一个甘特图组件后，我们需要进行操作，比如，拖拽调节开始日期、完成日期，调节完成百分比等。

Edo.lists.Gantt其实只有一个操作事件"itemdragcomplete"，根据此事件对象action属性的不同，可以区分为是开始日期、完成百分比操作等类型。

如下代码所示：//监听gantt的拖拽操作事件gantt.on('itemdragcomplete', function(e){var task = e.item;//获得操作后的值,将其覆盖掉任务原来的值,就修改了任务属性var value = e[e.action];//设置后,不会因为任务多次操作,而不断引发视图刷新dataGantt.beginChange();switch(e.action){case 'Start': //调节开始日期task.Start = value;break;case 'Finish': //调节完成日期task.Finish = value;break;case 'PercentComplete': //调节完成百分比task.PercentComplete = value;break;case 'Item': //拖拽整个ganttItem, 这里用来移动任务整个日期value = e.Start;var time = task.Finish.getTime() - task.Start.getTime();task.Start = e.Start;task.Finish = new Date(task.Start.getTime() + time);break;}//在最后,只进行一次视图刷新, 提升操作性能和体验dataGantt.endChange();});我们通过监听Edo.lists.Gantt对象的itemdragcomplete事件，对不同的操作类型进行不同的任务属性修改处理。

下面是各种界面拖拽操作，对应的itemdragcomplete事件对象的action操作类型：Start：Finish：PercentComplete：Item：注意，本例是简单的任务属性修改处理，只修改任务本身的属性。

实际情况是，当一个任务的属性修改后，根据任务相关性和父子关系，会对其他任务造成“数据联动修改”，这就是复杂的项目管理功能逻辑了。

总之，不管是简单还是复杂处理数据修改，itemdragcomplete事件是甘特图界面操作的数据修改入口点。

监听处理任务树事件以上只说明了Edo.lists.Gantt对象的事件，事实上我们必须对Edo.lists.Tree 树形组件也作出事件监听，因为一个标准的甘特图，不仅仅只有条形图，还有一个任务树。

下面是Edo.lists.Tree的事件监听和处理代码：tree.on('beforesubmitedit', function(e){var task = this.data.getAt(e.row); //获得当前行任务对象var column = this.columns[e.column]; //获得当前编辑的列对象dataGantt.beginChange();switch(column.dataIndex){case 'Name': = e.value;break;case 'Start':task.Start = e.value;break;case 'Finish':task.Finish = e.value;break;case 'PercentComplete':task.PercentComplete = e.value;break;}dataGantt.endChange();return false; //这一行代码很重要, 表示本次单元格编辑, 不进行默认操作});以上这段Edo.lists.Tree的事件处理逻辑，跟Edo.lists.Gantt是十分类似的，这里同样进行了简单的任务修改处理，也可以进行复杂的项目管理功能逻辑处理。