EdoProject介绍

EdoProject的组成

EdoProject由两个主要部分构成:

  1. 界面显示组件:Project
  2. 数据源组件:DataProject

Project是可视的组件,它用于界面显示、编辑操作、用户交互等功能。
DataProject是项目管理数据组件,负责数据视图和数据操作。

EdoProject其他功能模块:

  1. 数据交互:实现项目加载和保存。
  2. 项目管理调度插件:实现仿微软Project的数据调整和联动处理。
  3. 操作面板:实现各种数据,如任务、日历、项目、资源等显示和编辑。
  4. 右键菜单:实现快速界面操作。
  5. 按钮工具栏:实现功能按钮操作。

这些功能模块独立于EdoProject,都是可替换的。
开发者可以参考这些模块的代码实现,扩展或修改成符合自己需要的功能。

Project

Project是可视的组件,它用于界面显示、编辑操作、用户交互等功能。

创建一个Project对象非常简单:

//创建EdoProject
var project = new Edo.project.Project();
project.set({
    width: 570,
    height: 250,
    render: document.getElementById('view')
});

示意效果图如下:

Project由以下两个部分组成:

  1. 任务树:TreeGrid
  2. 条形图:Gantt

从界面上看,它与EdoGantt差不多,但是增强了一些列,并且与DataProject深度集成。
比如,Project默认提供了8个标准列,如索引列,状态列,工期列,资源列等,都属于比较复杂的列。
有关EdoProject的标准列,请看这里

我们可以分别找到任务树和条形图对象,从而进行丰富的界面和功能自定义:

var tree = project.tree;    //任务树对象, 是TreeGrid
var gantt = project.gantt;  //条形图对象, 是Gantt

//对任务树进行自定义操作
tree.set(......);           //伪代码

//对条形图进行自定义操作
gantt.set(......);          //伪代码

当我们找到相关对象后,就可以独立设置和扩展。
通过参考TreeGrid和Gantt的相关的教程、示例,开发者可以开发出丰富的自定义功能。

DataProject

DataProject是项目管理数据组件,负责数据视图和数据操作。
创建DataProject时,需要提供符合EdoProject数据结构的数据,这个数据可以是JSON的,也可以直接是一个微软Project XML文件。
如果是XML格式,也是先转换为JSON,然后用来创建DataProject。

下面是创建DataProject并设置给EdoProject的代码:

//假设项目数据已经获得
var data = {...};
var dataProject = new Edo.data.DataProject(data);
project.set('data', dataProject);

DataProject本身有一些项目的基础属性,如项目名称(Name)、项目开始日期(StartDate)、项目完成日期(FinishDate)等。
DataProject有一些重要属性,如下:

  • Tasks:任务数据对象。DataGantt类型。所有对任务的操作全部通过此对象来进行。
  • Calendars:日历数据对象。
  • Resources:资源数据对象
  • Assignments:资源分配关系对象

数据交互

EdoProject支持从JSON文件加载项目项目,也可以从XML文件加载,同时直接支持与服务端的双向数据交互:加载和保存。

EdoProject的所有数据交互相关方法都集中放在ProjectServer.js内,其中包括:

  • loadJSON(path, project):加载静态JSON文件
  • loadXML(path, project):加载静态XML文件
  • loadProject(projectUID, project):根据项目UID,从服务端数据加载项目数据,是JSON格式。
  • saveProject(dataProject):保存一个项目数据到服务端。
  • deleteProject(projectUID):根据项目UID, 从服务端数据库删除项目。

更多EdoProject数据交互实现细节,请访问这里

项目管理调度插件

项目管理调度插件是一个实现项目日历、任务相关性、任务日期和工期的联动计算,以及关键路径等项目管理功能逻辑的业务逻辑插件。
通过如下场景让您尽量了解它的功能和作用:

  • 调整任务开始日期后,会自动将任务完成日期按工期重新计算。
  • 调整任务工期后,会自动将任务完成日期按开始日期和工期重新计算。
  • 调整任务完成日期后,会自动将任务工期重新计算。
  • 调整一个任务后,会自动将其相关的后置任务,按任务相关性联动计算。
  • 调整任务到一个非工作日,会自动定位到工作日。
  • 调整项目日历设置后,会自动将所有任务重新排程定位到适合的工作日。

更多项目管理调度插件实现细节,请访问这里

操作面板

操作面板用于显示和编辑项目各种数据,如任务,日历,资源等数据。
一共有如下操作面板:

  • 任务面板:显示/编辑任务。
  • 日历面板:显示/编辑项目日历。
  • 项目面板:显示/编辑项目基本信息。
  • 任务相关性面板:显示/编辑任务相关性。
  • 资源面板:显示/编辑资源。
  • 项目选择面板:查询/加载/删除项目。

更多操作面板功能和实现细节,请访问这里

右键菜单

右键菜单用于实现快速界面操作。
开发者可以获得右键菜单对象,对右键菜单进行自定义修改:

//获得甘特图右键菜单对象
var menu = project.getMenu();
//隐藏掉"编辑"菜单项
menu.getChildAt(6).set('visible', false);
//增加菜单项
menu.addChildAt(6, {
    type: 'button',
    icon: 'e-icon-edit',
    text: '编辑比较基准',
    onclick: function(e){
        var task = project.getSelected();
        if(task){
            alert("编辑任务:"+task.Name);
        }else{
            alert("请先选中要编辑的任务");
        }
    }
});

自定义右键菜单效果图如下:

您也可以禁止显示右键菜单:

project.set('enableMenu', false);

按钮工具栏

按钮工具栏ProjectToolBar是界面操作的主要入口,排列了一些功能操作按钮。
通过工具栏,你可以加载和保存项目,升级、降级、增加、删除、修改任务,查看、修改项目日历等。

创建ProjectToolBar的代码如下:

//创建ProjectToolBar工具栏
var toolbar = new ProjectToolBar();
toolbar.set({
    project: project,//将创建的project对象设置给ProjectToolBar
    width: 570,
    border: [1,1,0,1],
    render: document.getElementById('toolbar')
});

注意,可以多次重复创建ProjectToolBar,但是必须传递project项目对象属性,这样工具条可以对不同的Project对象起作用。

效果图如下:

开发者完整可以自己实现功能操作按钮,比如一个简单的HTML Button。
关键是参考ProjectToolBar中如何调用Project的相关方法,实现如弹出任务面板,新增任务,弹出日历面板等功能。