甘特图组成

EdoGantt的组成

EdoGantt由两个主要部分构成:

  1. 界面显示组件:EdoGantt
  2. 数据源组件:Edo.data.DataGantt

EdoGantt是可视的组件,它用于界面显示、编辑操作、用户交互等功能。
DataGantt是不可见的数据组件,负责DataGantt的数据视图和数据操作。在DataGantt上的所有数据操作,比如增、删、改、过滤、排序等,都会被EdoGantt监听并更新界面。
EdoGantt是由两个重要的界面组件组成的:

  1. TreeGrid:树形表格组件。
  2. Gantt:条形图组件。

如上图,左侧的是TreeGrid,右侧是Gantt,他们组合起来就是一个标准的甘特图。

当我们创建完EdoGantt后,可以通过如下代码,获得不同的组件对象:

var edogantt = new EdoGantt();
edogantt.set({
    type: 'edogantt',
    width: 500,height: 200,
    render: document.body
});
var treegrid = edogantt.tree;   //任务树对象
var gantt = edogantt.gantt;     //条形图对象
var dataGantt = edogantt.data;  //甘特图数据对象
//获得相关对象后,可以单独操作

TreeGrid组件

TreeGrid是用纯JavaScript 编写的DHTML组件,它可以在HTML网页上显示和编辑表格,网格,树状视图或树型网格中的数据。
对于EdoGantt,我们着重介绍Gantt和DataGantt,有关TreeGrid更多使用和示例,请参考如下:

Gantt组件

Edo.lists.Gantt是一个条形图组件,顶部是时间线,每一行有一个条形图,条形图由开始日期和完成日期定位显示。
支持条形图的拖拽调节开始日期、完成日期、完成百分比等,可以自定义条形图的外观,并且通过监听处理Gantt的相关事件,来自定义业务处理逻辑。

DataGantt数据源组件

data属性就是一个Edo.data.DataGantt对象。
它负责表格数据操作,例如增加行、删除行、修改单元格、移动、排序、过滤等操作。
EdoGantt通过监听DataGantt的"datachanged"数据改变事件,更新自己的界面视图。

创建DataGantt只需要一个简单的数据结构,甘特图数据结构请看这里

EdoGantt和DataGantt如何配合使用,请参考加载数据教程。



通过本教程,您知道了一个标准的甘特图是使用TreeGrid和Gantt组成的,数据源对象是DataGantt。
当我们找到不同的对象之后,就可以基于此对象进行扩展操作,常见的扩展如下:

  • TreeGrid:自定义列、自定义单元格内容、自定义单元格编辑器、根据权限控制编辑器等。
  • Gantt:自定义条形图外观、监听处理拖拽事件
  • DataGantt:加载、保存数据