Bookmark and Share

快速入门

  1. 下载运行
  2. 加载服务端数据
  3. 保存数据到服务端
  4. 表结构设计
  5. 自定义属性
  6. 语言本地化

1.下载运行

下载

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

  • EdoGantt.rar 纯Javascript
  • EdoGantt_java.rar JAVA后台演示版
  • EdoGantt_net.rar .NET后台演示版

注:EdoGantt是一个纯Javascript的组件产品。
我们提供java和.net后台演示,是为了让您更方便、快速的掌握如何将EdoGantt与您的系统集成开发。

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

导入项目

下载后,将EdoGantt_java.rar解压缩,可以将此项目直接导入到Eclipse中。如果是.NET,请用VS的"文件->打开->网站"方式将下载的EdoGantt_net当成一个网站打开。

有如下几个文件:

文件说明如下:

  • 1_statis.html:演示EdoGantt加载显示一个静态JSON文件
  • 2_server.html:演示EdoGantt从服务端加载数据和保存数据(重要)
  • 3_local.html:演示多语言支持

运行示例

1_static.html加载一个本地的JSON文件,代码如下:

//创建易度甘特图
var edogantt = new EdoGantt();
edogantt.set({    
    width: 600,
    height: 300,        
    render: document.getElementById('view')
});
//从一个静态的JSON格式文件加载数据
Edo.util.Ajax.request({
    url: 'data/data.txt',
    type: 'get',
    onSuccess: function(text){
        var ganttData = Edo.util.JSON.decode(text);
        var dataGantt = new Edo.data.DataGantt(ganttData);        
        edogantt.set('data', dataGantt);
    },
    onFail: function(code){
        alert("加载失败:"+code);
    }
});

运行1_static.html示例,效果图如下:

EdoGantt是一个高级的Javascript组件,只需要一个简单的数据结构就可以运行。
关于易度甘特图的数据结构,请看这里

2.加载服务端数据

本节演示:

  • 数据库加载
  • 表格数据转树形数据
  • JSON序列化和反序列化
  • Ajax使用
  • 甘特图创建和数据设置

从服务端加载甘特图数据,有如下几个步骤:

  1. 从数据库加载任务列表。是一个表格状数据。
  2. 将表格数据,转换为树形数据,满足甘特图的数据结构需要。得到一个任务树。
  3. 使用服务端JSON组件:Edo.util.JSON,将任务树转换成JSON字符串,返回到页面。
  4. 页面获得JSON数据后,将JSON字符串转换为JS对象,设置给甘特图。完成加载服务端数据工作。

在服务端GanttService.LoadProject方法中,首先获得一个任务列表数据:

    //这里模拟数据库查询操作, 从本地加载一个表格状的任务数据
    List tasks = LoadProjectFromDatabase(projectUID);

然后,直接将任务列表转换为任务树,使用Edo.util.Tree.toTree方法:

    //获得表格数据后, 转换成树形, 得到一个任务树
    List taskTree = Edo.util.Tree.toTree(tasks, "UID", "ParentTaskUID");
   return taskTree;

为了使用者的方便,我们提供了专门用于“表格转树形”、“树形转表格”的组件:Edo.util.Tree。

最后,使用Edo.util.JSON组件,将返回的数据一次性转换为JSON字符串:

String json = Edo.util.JSON.encode(result);
response.getWriter().write(json);

在页面客户端,我们使用Ajax获取数据,然后设置给甘特图:

//从服务端页面加载数据
Edo.util.Ajax.request({
    url: 'data/server.jsp',
    type: 'get',
    params: {
        method: 'load',
        projectUID: 1       //这里模拟一个项目UID
    },
    onSuccess: function(text){
        var ganttData = Edo.util.JSON.decode(text).result;
        var dataGantt = new Edo.data.DataGantt(ganttData);        
        edogantt.set('data', dataGantt);
    },
    onFail: function(code){
        alert("加载失败:"+code);
    }
});

这样就完成了甘特图的数据加载工作。

3.保存数据到服务端

本节演示:

  • 获取甘特图操作后的数据
  • 使用Ajax提交数据到服务端
  • 服务端将树形结构数据转表格数据
  • 将任务列表保存到数据库

保存数据分为:全部保存,局部保存。

全部保存好理解,就是提交完整的任务数据;
局部保存是值,只提交修改、新增、删除的数据。

全局保存代码:

//data是Javascript Array对象
var data = edogantt.data.getSource();

局部保存代码:

//将新增/删除/修改的数据组织成一个数据对象
var data = {
    adds: edogantt.data.getAdded(),
    updates: edogantt.data.getUpdated(),
    deletes: edogantt.data.getDeleted()
};

接下来以"全部保存"为例,说明如何提交到服务端,服务端如何做出处理。

使用Ajax将数据提交到服务端:

    var data = edogantt.data.getSource();
    var json = Edo.util.JSON.encode(data);
    Edo.util.Ajax.request({
        url: 'data/server.jsp',
        type: 'post',           //提交数据, 必须是post方式
        params: {
            method: 'save',
            projectUID: 1,       //这里模拟一个项目UID
            data: json
        },
        onSuccess: function(text){
            alert("保存成功");
        },
        onFail: function(code){
            alert("保存失败:"+code);
        }
    });

服务端的server.jsp页面如下处理:

    //使用request对象获得提交的JSON字符串数据
	String dataString = request.getParameter("data");   
	//将json字符串转换为java对象
    List tasktree = (List)Edo.util.JSON.decode(dataString);        
    //保存到数据库中
    GanttService.SaveProject(tasktree);
    ......

在SaveProject方法中,有一个重要的操作:树形数据转表格数据。

List tasks = Edo.util.Tree.toTable(tasktree, "-1", "UID", "ParentTaskUID");

然后,将任务列表一一更新到数据库就可以了。

4.表结构设计

一般这样设计三个表:tasks、tasklinks、projects

tasks 任务表

字段名类型描述
UIDString唯一标识符
NameString任务名称
PercentCompleteNumber完成百分比
StartDate开始日期
FinishDate完成日期
DurationNumber工期
CriticalInt1或0。是否关键任务
SummaryInt1或0。是否摘要任务
ParentTaskUIDString父任务UID
ProjectUIDString项目UID

tasklinks 任务关系表

字段名类型描述
TaskUIDString任务UID
PredecessorUIDString前置任务UID
TypeInt1,2,3,4。一共4种任务相关性。
ProjectUIDString项目UID

projects 项目表

字段名类型描述
UIDString项目UID
NameString项目名称

参考这里的数据结构和数据类型,可以在任意数据库中创建出表实例。

5.自定义属性

自定义属性有如下几个方面:

  • 扩展表字段。如将task增加负责人、部门字段。
  • 修正Sql操作。必须确保新增的字段能正确inert和select。
  • 扩展甘特图列。比如增加一个负责人列。具体参考自定义任务树

6.语言本地化

EdoGantt可以轻松实现多国语言切换,只需要切换scripts/edo/locale里面的资源文件即可。

在scripts/edo/locale文件夹内,有如下资源文件:

在3_locale.html示例中,我们演示了英语版本。

只要一个步骤:引入目标语言的js文件。

<script src="scripts/edo/edo.js" type="text/javascript"></script>

<script src="scripts/edogantt/EdoGantt.js" type="text/javascript"></script>
<script src="scripts/edogantt/GanttMenu.js" type="text/javascript"></script>
<script src="scripts/edogantt/GanttSchedule.js" type="text/javascript"></script>

<script src="scripts/edo/locale/en.js" type="text/javascript"></script>

英文版效果图如下:

如果我们的locale文件内没有您所需要的语言资源文件,可以参考其他语言资源js的方式,可以轻松扩展实现。



联系我们:

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

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