关闭

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

标签: 甘特图dhtmlxGant
23054人阅读 评论(3) 收藏 举报
分类:

简介

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

本文将介绍如何使用使用 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

然后,我们创建一个用来初始化dhtmlxganttDIV
注意到,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文件,添加下列代码:
<?php

include ('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插件加载数据、保存数据等等基本功能的用法,关于如何进行一些自定义配置,我们将会在接下来的文章中进行探讨。

2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

[dhtmlxGantt(甘特图)开发手册]第三篇——语言设置、导出PDF/PNG、导出Excel/iCal等

1.简介第一篇 第二篇 本文将介绍如何设置 dhtmlxGantt 的语言、导出PDF/PNG、导出Word/Excel等等。 2.设置语言顾名思义,语言设置可以让甘特图使用你希望的语言来呈现。...
  • honantic
  • honantic
  • 2016-05-11 20:17
  • 22974

[dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能

1.简介 本文将介绍如何在页面中初始化一个 dhtmlxGantt 对象,这是进行所有后续工作的前提。 2.初始化 在页面中初始化甘特图——————————————————————————————...
  • honantic
  • honantic
  • 2016-05-09 21:31
  • 24980

[dhtmlxGantt(甘特图)开发手册]第三篇——语言设置、导出PDF/PNG、导出Excel/iCal等

1.简介第一篇 第二篇 本文将介绍如何设置 dhtmlxGantt 的语言、导出PDF/PNG、导出Word/Excel等等。 2.设置语言顾名思义,语言设置可以让甘特图使用你希望的语言来呈现。...
  • honantic
  • honantic
  • 2016-05-11 20:17
  • 22974

[dhtmlxGant(甘特图)开发手册]第二篇——初始化、基本设置以及基本功能

1.简介 本文将介绍如何在页面中初始化一个 dhtmlxGantt 对象,这是进行所有后续工作的前提。 2.初始化 在页面中初始化甘特图——————————————————————————————...
  • honantic
  • honantic
  • 2016-05-09 21:31
  • 24980

甘特图-dhtmlxGantt

利用甘特图-dhtmlxGantt插入数据保存到数据库中第一步: 下载dhtmlxGantt,下载地址:https://dhtmlx.com/docs/products/dhtmlxGantt/ 解压...
  • gyy93
  • gyy93
  • 2017-06-01 17:21
  • 273

JIDE Gantt Chart (甘特图)开发员技术手册

  • 2012-02-18 16:01
  • 321KB
  • 下载

甘特图——Excel搞定

根据本文的介绍,我们知道了甘特图作为项目管理中的一部分是必不可少的,它不仅仅反映出整个阶段的任务划分,而且也可以反映当前的进度。同时,我们还通过Excel介绍了如何绘制甘特图,希望我们在以后的工作中灵...
  • u010168160
  • u010168160
  • 2015-06-06 07:49
  • 2112

21天战拖记——Day17:如何将想法落地:SMART原则、思维导图、甘特图、九宫格、六个高度(2014-05-20)

学习《小强升职记(升级版)》的记录: 用SMART法则厘清你的目标 S——Specific:目标一定要明确,不能够模糊。 M——Measurable:目标的可衡量性,是否有一个实...
  • Miracle_Wong
  • Miracle_Wong
  • 2014-05-20 16:06
  • 2240

Extjs甘特图开发之高级应用

Extjs甘特图的大数据量和性能优化 Extjs甘特图所能支持的数据量,以及界面的渲染和操作性能,是衡量一个甘特图组件是否符合项目需要的重要指标。 为了支持超过万级超大数据量的甘特图,Ex...
  • csnywj
  • csnywj
  • 2012-02-29 11:06
  • 852

写给甘特图应用程序开发人员

当你在开发甘特图应用程序之前,给自己打下这几个预防针: 甘特图看似一个琐碎的可视化呈现方式,却为生产调度应用程序的开发带来了巨大动力。事实上,甘特图应用程序的开发具有相当的复杂程度。在开发和使用...
  • pk52020081
  • pk52020081
  • 2015-05-07 16:15
  • 862
    个人资料
    • 访问:875735次
    • 积分:5127
    • 等级:
    • 排名:第6275名
    • 原创:55篇
    • 转载:8篇
    • 译文:7篇
    • 评论:44条
    最新评论