[dhtmlxGant(甘特图)开发手册]第一篇——如何使用dhtmlxGantt

来源：互联网发布：淘宝网上购物视频教程编辑：程序博客网时间：2024/06/01 08:16

简介

第一篇
第二篇
第三篇
第四篇

本文将介绍如何使用使用 dhtmlxGantt 在页面中创建基本的甘特图，并且能够将数据保存/更新至数据库(例如服务器上的数据库)。
本文中最终的代码可以作为创建甘特图应用的基础样例代码。

这里写图片描述

第一步：下载dhtmlxGantt

首先，我们需要下载代码库到本地：

下载dhtmlxGantt代码包，如果已经下载了，跳过本步骤。
解压缩代码包，将其放置在指定的路径中的”dhtmlGantt”文件夹中，如果没有该文件夹则创建一个。

第二步：在HTML文件中引入dhtmlxGantt代码

然后，为了使用该插件，我们需要在自己的HTML文件中引入dhtmlGantt代码。我们需要引入的文件为：
- dhtmlxgantt.js
- dhtmlxgantt.css
接下来：
- 在“dhtmlxGantt”文件夹中创建一个HTML文件，命名为类似“myGantt.html”。
- 在该文件中引入dhtmlxGantt代码：

<!DOCTYPE html><html><head>    <title>如何使用dhtmlxGantt</title>    <script src="codebase/dhtmlxgantt.js"></script>    <link href="codebase/dhtmlxgantt.css" rel="stylesheet"></head><body>    //这里是你的代码</body></html>

第三步：初始化dhtmlxGantt

然后，我们创建一个用来初始化dhtmlxgantt的DIV。
注意到，dhtmlxgantt是一个静态对象，会随着页面初始化而实例化。要引用该实例，我们只需要使用dhtmlxgantt或者gantt即可。

在myGantt.html文件中定义一个DIV容器
通过“gant.init(“gantt_here”)”命令来初始化dhtmlxgantt。该方法中的参数为DIV容器的ID。

<!DOCTYPE html><html><head>    <title>如何使用dhtmlxGantt</title>    <script src="codebase/dhtmlxgantt.js"></script>    <link href="codebase/dhtmlxgantt.css" rel="stylesheet"></head><body>    <div id="gantt_here" style='width:1000px; height:400px;'></div>    <script type="text/javascript">        gantt.init("gantt_here");    </script></body></html>

注意到，如果你需要使用全屏模式，需要在html代码中设置如下样式：

<style type="text/css" media="screen">    html, body{        margin:0px;        padding:0px;        height:100%;        overflow:hidden;    }</style>

第四步：为dhtmlxGantt加载数据

接下来，我们需要为甘特图填入数据。为简单起见，我们这里采用最简单的方式，将数据源作为内联对象直接声明在Html文档里。
我们将会使用parse方法来加载数据。

数据对象的属性如下：
● data - 定义甘特图中的任务
　　○ id - (string, number)任务id
　　○ start_date - (Date)任务开始日期
　　○ text - (string)任务描述
　　○ progress - (number) 任务完成度，0到1
　　○ duration - (number) 在当前时间刻度下的任务持续周期
　　○ parent - (number) 父任务的id
● links - 定义甘特图中的任务关联线
　　○ id - (string, number) 关联线id
　　○ source - (number) 数据源任务的id
　　○ target - (number) 目标源任务的id
　　○ type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束”

声明’tasks’变量：

var tasks={    data:[        {id:1, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true},        {{id:2, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},        {id:3, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},        {id:4, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.5, open:true},        {id:5, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:1, open:true},        {id:6, text:"项目 #1", start_date:"2016-05-01", duration:11, progress:0.6, open:true}    ],    links:[        {id:1, source:1, target:2, type:"1"},        {id:2, source:1, target:3, type:"1"},        {id:3, source:3, target:4, type:"1"},        {id:4, source:4, target:5, type:"0"},        {id:5, source:5, target:6, type:"0"}    ]};

初始化：

gantt.init("gantt_here");gantt.parse(tasks);

第五步：创建一个数据库

如果你希望从数据库中加载数据，而不是将数据内联在Html代码中，那么你应该看看本步骤及其后续。

我们需要两张数据表来存放任务和关联线：
这里写图片描述

sortorder属性是用来生成任务的index的。

创建一个名为gantt的数据库
执行下面的语句创建数据表:

CREATE TABLE `gantt_links` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `source` int(11) NOT NULL,  `target` int(11) NOT NULL,  `type` varchar(1) NOT NULL,  PRIMARY KEY (`id`))CREATE TABLE `gantt_tasks` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `text` varchar(255) NOT NULL,  `start_date` datetime NOT NULL,  `duration` int(11) NOT NULL,  `progress` float NOT NULL,  `sortorder` int(11) NOT NULL,  `parent` int(11) NOT NULL,  PRIMARY KEY (`id`))

第六步：从数据库中加载数据

在接下来的两步中，将采用PHP平台来完成sever-client的互联。如果你使用其他平台或者语言，那么需要自行编写代码。

我们采用 load 方法来完成数据加载，本方法的参数为数据源的URL。在本例中，URL参数指向一个实现了数据库连接、查询功能的PHP文件。
我们使用PHP平台和 dhtmlxConnector 类库，这是实现dhtmlxGantt服务器逻辑的最简单的方式。

在’dhtmlxGantt’文件夹中创建一个PHP文件，命名为data.php
打开data.php文件，添加下列代码：

<?phpinclude ('codebase/connector/gantt_connector.php');$res=mysql_connect("localhost","root","");mysql_select_db("gantt");$gantt = new JSONGanttConnector($res);$gantt->render_links("gantt_links","id","source,target,type");$gantt->render_table(    "gantt_tasks",    "id",    "start_date,duration,text,progress,sortorder,parent");?>

在 myGantt.html 文件中，设置时间格式，让输出的数据格式与dhtmlxGantt的格式相匹配：

gantt.config.xml_date = "%Y-%m-%d %H:%i";gantt.init("gantt_here");

调用 load 方法加载数据

gantt.config.xml_date = "%Y-%m-%d %H:%i";gantt.init("gantt_here");gantt.load('data.php');//loads data to Gantt from the database

第七步：更新数据库

接下来，我们需要将甘特图中的数据保存到数据库中，我们需要用到dataProcessor帮助类库。

gantt.init("gantt_here");gantt.load('data.php');var dp=new gantt.dataProcessor("data.php");  dp.init(gantt);

现在我们已经了解了dhtmlxGantt插件加载数据、保存数据等等基本功能的用法，关于如何进行一些自定义配置，我们将会在接下来的文章中进行探讨。

0 0