Bookmark and Share

快速入门

  1. 下载安装
  2. 导入运行
  3. 系统集成:扩展属性
  4. 系统集成:任务筛选
  5. 系统集成:多项目管理

在本教程中,我们主要解决两个问题:

  1. 如何正确安装EdoProject。
  2. 如何将EdoProject集成到您的系统中。

1.下载安装

下载

访问http://www.edogantt.com/download.html,点击下载:

  • EdoProject_java.rar JAVA后台
  • EdoProject_net.rar .NET后台

注:本入门教程以JAVA后台为例,除个别细节外,使用.NET版本跟JAVA是完全一样的。

导入Eclipse

下载后,将EdoProject_java.rar解压缩,可以将此项目直接导入到Eclipse中。

其中,文件说明如下:

  • database:数据库SQL文件
  • src:服务端JAVA代码
  • WebContent:javascript,html代码

创建数据库表

在database下,有三种数据库的SQL文件,分别支持:Oracle、MySql、SqlServer。

这里我们选择MySql作为示例。

将mysql.sql文件中的SQL代码,其实就是一些创建表的SQL语句,在目标数据库中创建。
如果没有目标数据库,可以新建一个数据库,如edo。

创建好的数据库视图如下:

修改数据库连接配置

在src/sqlmapconfig.xml文件中,修改mysql的数据库连接配置参数:

<property name="JDBC.ConnectionURL" value="jdbc:mysql://localhost/edo?useUnicode=true&amp;characterEncoding=utf8"   />
<property name="JDBC.Username" value="root"/>
<property name="JDBC.Password" value="123456"/>

一般只需要修改数据库名称、用户名、密码即可。

如果是其他数据库,可以选择其他数据库的配置代码,将被注释的SQL配置取消注释即可。

完成以上导入Eclipse、创建数据库表、修改数据库连接配置信息后,EdoProject算是已经安装成功。下面开始导入和运行实际的项目数据了。


2.导入运行

微软Project XML文件

我们可以将微软Project项目直接导入到EdoProject中。
在微软Project中,文件->另存为->保存类型:XML格式,点击保存。

注意记住保存的项目XML地址,在下面将其导入到EdoProject中。

使用Import.html导入项目

Import.html专门用于导入微软Project项目数据。运行Import.html后,看到如下界面。

点击"Upload"按钮,弹出项目文件选择框,选择刚才从微软Project保存的项目XML文件。

如果本地没有微软Project,可以使用EdoProject作为示例用的XML文件,选择WebContent/data/project.xml导入。

导入后,需要点击“保存”按钮,才真正将项目数据保存到数据库中。

导入保存项目数据后,会自动生成一个项目UID,复制此UID,打开LoadDB.html,从数据库加载刚才导入的项目数据。

使用LoadDB.html加载项目数据

打开LoadDB.html后,可以输入项目UID,加载指定的项目数据;也可以弹出项目选择面板,选择一个项目加载。

到这里为止,完成了EdoProject的安装、配置、项目导入、项目加载、项目保存等完整工作流程。
EdoProject作为一个独立的基于Web的项目管理系统运行成功。

系统集成:扩展属性

EdoProject与系统集成,主要是通过扩展任务负责人、部门等属性实现的。
一般您的系统会有用户表、部门表等。能通过EdoProject创建项目、计划任务、分配任务到负责人、部门等,算是完成了与EdoProject的大部分集成工作。

扩展任务属性有如下几个步骤:

  1. 扩展任务表edo_task的字段
  2. 服务端SQL对新增字段的操作:insert和select。
  3. 在界面上扩展任务树的列,显示和编辑新增的任务属性。

下面从简单到复杂,逐一讲解如何扩展任务属性。

简单属性扩展

我们以给任务增加一个High(严重级别)属性为例。

首先,我们在edo_task任务表内定义一个High字段列,为数字类型。

然后,在"src/sql/EdoProject.xml"数据库SQL操作文件内,为新增的字段补上相关的sql。

<insert id="insertTask">
  INSERT INTO edo_task
  (
  UID,
  ...
  High  <!--新增的字段-->
  )
  VALUES (
  #UID#,
  ...
  #High#  <!--新增的字段-->

  )
</insert>

注意:因为我们获取任务数据的时候, 是“select * ”方式,所以,不需修改获取任务属性的SQL。

最后,我们在前台页面创建易度甘特图显示对象时候,插入一个新增的列,代码如下:

//获得任务树已有定义的列配置对象
var columns = project.tree.getColumns();
//新增一列,以及编辑器
columns[0].columns.insert(0, {
    header: '严重级别',
    dataIndex: 'High',
    editor: {
        type: 'text'
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下:

选择类型(单选)

选择类型是不需要直接输入信息的,而是从多个结果中选择一个或多个的选中项。

本节以选择单选任务状态Status为例,说明如何实现一个有多个结果的单选场景。

首先,我们在edo_task扩展一个字段:Status。数字类型。
同时在"src/sql/EdoProject.xml"内,修改insertTask语句:

<insert id="insertTask">
  INSERT INTO edo_task
  (
  UID,
  ...
  Status  <!--新增的字段-->
  )
  VALUES (
  #UID#,
  ...
  #Status#  <!--新增的字段-->

  )
</insert>

最后,对任务树扩展一个任务状态列,代码如下:

var TaskStatus = [
    {id: 1, name: '未启动'},
    {id: 2, name: '进行中'},
    {id: 3, name: '暂停中'},
    {id: 4, name: '已完成'}
];
//获得任务树已有定义的列配置对象
var columns = project.tree.getColumns();
//新增"任务状态列"
columns[0].columns.insert(0, {
    header: '任务状态', dataIndex: 'Status',
    editor: {
        id: 'taskstatus', 
        type: 'combo',      //下拉选择框
        displayField: 'name', 
        valueField: 'id',
        readOnly: true,
        data: TaskStatus
    },
    renderer: function(v, r){          
        for(var i=0,l=TaskStatus.length; i<l; i++){
            var d = TaskStatus[i];
            if(v == d.id) return d.name;
        }
        return '';
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下:

本例的状态数据是静态的,直接定义在页面内。
下面的示例数据是需要从服务端获取的

选择类型(多选)

本节以选择多选部门为例。(如果是分配给多个负责人,与本节一样处理

首先,在任务表edo_task扩展字段:Department。字符串类型。 同时在"src/sql/EdoProject.xml"内,修改insertTask语句:

<insert id="insertTask">
  INSERT INTO edo_task
  (
  UID,
  ...
  Department  <!--新增的字段-->
  )
  VALUES (
  #UID#,
  ...
  #Department#  <!--新增的字段-->

  )
</insert>

最后,给任务树扩展一个部门列,代码如下:


//注意:这里的Departments部门数据,是服务端动态生成的,比如使用Ajax同步加载
/*
var Departments = [];
Edo.util.Ajax.request({
    url: 'getDepartments.jsp',
    sync: false,    //是否异步.否
     onSuccess: function(text){
        Departments = Edo.util.JSON.decode(text);
    }
});
*/
var Departments = [
    {id: 1, name: '研发部'},
    {id: 2, name: '财务部'},
    {id: 3, name: '人事部'},
    {id: 4, name: '投资部'},
    {id: 5, name: '商务部'}
];
//获得任务树已有定义的列配置对象
var columns = project.tree.getColumns();
//新增"部门"
columns[0].columns.insert(0, {
    header: '部门', dataIndex: 'Department',
    editor: {        
        type: 'multicombo',      //多选下拉选择框
         displayField: 'name', 
        valueField: 'id',
        readOnly: true,
        data: Departments
    },
    renderer: function(v, r){       
        if(!v) return;        
        var ds = v.split(',');
        var sb = [];
        for(var j=0,k=ds.length; j<k; j++){
            var id = ds[j];
            for(var i=0,l=Departments.length; i<l; i++){
                var d = Departments[i];
                if(id == d.id) {
                    sb.push(d.name);
                    break;
                }
            }        
        }
        return sb.join(',');
    }
});
//将修改后的列配置对象, 设置给任务树的columns属性
project.tree.set('columns', columns);

效果图如下:

系统集成:任务筛选

有两种EdoProject的应用场景:

  • 完整数据场景:项目经理建立项目、编制任务、分配任务和资源。
  • 局部数据场景:项目成员查看分配给自己的任务,按日期范围、任务状态、类型等筛选任务等。

当我们对任务的日期、工期等属性做调整时,会导致其后置任务的联动日期调整。这时候就需要一个完整的数据环境,否则缺乏完整数据而导致任务联动计算有误。

在筛选任务的情况下,我们可以修改任务的非日期、工期等属性。
比如任务状态、完成百分比、负责人、所属部门等。
修改这些任务数据,不会导致其后置任务的联动日期调整。

实现任务筛选是有如下几个步骤:

  1. 服务端select语句实现。这里简单举一个查询示例:
    <!-- 模糊查询项目中的任务 -->
    <select id="selectTask" resultClass="Hashtable">
      select * from edo_project
      where Name like #key# and ProjectUID = #ProjectUID#
    </select>
  2. 将根据一定条件查询出来的数据,组织成一个表格或树形数据结构。不需要符合EdoProject的数据结构。
  3. 在界面,使用树形表格TreeGrid、甘特图EdoGantt或日历图展现。

此时由于数据的简单性,我们有更多显示组件可供选择, 如:树形表格TreeGrid、甘特图EdoGantt或日历图等。
下面简单给一个TreeGrid的界面截图,相信如果是给普通项目成员看“我的工作任务”数据会很适合:

您购买EdoProject产品后,也就具备了TreeGrid的使用权。关于TreeGrid,请看这里

系统集成:多项目管理

可以用TreeGrid做一个多项目显示和管理界面。有如下几个步骤:

  1. 给edo_project增加一个ParentProjectUID字段,表示项目之间的父子关系。
  2. 将项目select查询出来,并组织成一个表格或树形数据。
  3. 使用TreeGrid显示项目列表或树形。

下面用一个静态的树形项目数据示例来演示。

代码如下:

//项目数据(实际系统使用Ajax从服务端获取)
var data = [
    {name: '项目1', duration: 120, start: '2010-01-01', finish: '2010-05-01', percentComplete: 0, status: 1},
    {name: '项目2', duration: 65, start: '2010-01-01', finish: '2010-05-01', percentComplete: 100, status: 2},
    {name: '项目3', duration: 100, start: '2010-01-01', finish: '2010-05-01', percentComplete: 90, status: 3},
    {name: '项目4', duration: 33, start: '2010-01-01', finish: '2010-05-01', percentComplete: 30, status: 3},
    {name: '项目5', duration: 12, start: '2010-01-01', finish: '2010-05-01', percentComplete: 60, status: 2},
    {name: '项目6', duration: 45, start: '2010-01-01', finish: '2010-05-01', percentComplete: 70, status: 1},
    {name: '项目7', duration: 141, start: '2010-01-01', finish: '2010-05-01', percentComplete: 20, status: 2},
    {name: '项目8', duration: 12, start: '2010-01-01', finish: '2010-05-01', percentComplete: 20, status: 2},
    {name: '项目9', duration: 53, start: '2010-01-01', finish: '2010-05-01', percentComplete: 20, status: 2}
]
var status = [
    {id: 1, name: '未启动', color: 'red'},
    {id: 2, name: '审核中', color: 'gray'},
    {id: 3, name: '已启动', color: 'green'}
];
//创建TreeGrid
var treegrid = new Edo.lists.TreeGrid()
.set({
    render: document.getElementById('grid'),  //加入到一个DOM元素中
    width: 700, height: 230, autoColumns: true, rowHeight: 22,
    treeColumn: 'name', //去除掉节点列
    autoExpandColumn: 'name',
    columns: [        
        {header: '项目名称', dataIndex: 'name', id: 'name',headerAlign: 'center'},   
        {header: '状态', dataIndex: 'status', align: 'center', headerAlign: 'center',
            renderer: function(value){
                var name = '';
                for(var i=0,l=status.length; i<l; i++){
                    var su = status[i];
                    if(su.id == value){
                        name = '<span style="color:'+su.color+'">'+su.name+'</span>';
                        break;                        
                    }
                }
                return name;
            }
        },
        {header: '项目工期', width: 80,  headerAlign: 'center',align: 'center', dataIndex: 'duration',
            renderer:function(v){
                return v+"天";
            }
        },
        {header: '开始日期', dataIndex: 'start',  headerAlign: 'center',align: 'center'},
        {header: '完成日期', dataIndex: 'finish',  headerAlign: 'center',align: 'center'},
        {header: '项目进度', dataIndex: 'percentComplete',  headerAlign: 'center',align: 'center', cls: 'e-progress',
            editor: {
                type: 'spinner',
                minValue: 0,
                maxValue: 100
            },
            renderer: function(v, record, column){
                if(v=== undefined) return;
                var width = column.width * v / 100;
                return '<div class="e-progress-bar" style="position:absolute;left:0;top:0px;width:'+width+'px;height:100%;"></div>'
                    + '<div style=position:relative;line-height:20px;width:'+column.width+'px;>'+v+'%</div>';
            }
        },{
            width: 90,
            renderer: function(value, record){
                return '<a href="javascript:editRow('+record.__id+')">启动</a> '
                    +'<a href="javascript:deleteRow('+record.__id+')">撤销</a>';
            }
        }
    ]
});
//设置项目数据(正是环境用Ajax获取)
treegrid.set('data', data);

示例截图如下:



联系我们:

如果您有其他问题,请随时联系我们。

地址:上海市徐汇区中山西路1919号北科大厦B座507
电话:+86 021-61131713
邮编:200235
Email:services@plusoft.com.cn
MSN:services@plusoft.com.cn
QQ :191323977