本教程将指导你如何在网页上搭建一个简单的甘特图,并实现将任务保存和更新到服务器端数据库的功能。
本文重点介绍如何使用 dhtmlxConnector 构建甘特图。 如果你更倾向于使用其他服务器端技术,可以参考以下针对不同集成方式的教程:
Related sample: Basic initialization
首先,将该库包下载到你的电脑上。
接下来,在 HTML 文件中引入 dhtmlxGantt 的代码文件,从而可以使用该库的功能。 需要引入的 dhtmlxGantt 代码文件有:
myGantt.html
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxGantt</title>
<script src="codebase/dhtmlxgantt.js"></script> <link href="codebase/dhtmlxgantt.css" rel="stylesheet"> </head>
<body>
//your code will be here
</body>
</html>
然后,创建一个 DIV 容器,并在其中初始化 dhtmlxGantt。
请注意,dhtmlxGantt 是一个静态对象,每个页面只能实例化一次。
你可以通过 dhtmlxGantt 或 gantt 来引用该实例。
gantt.init("gantt_here")
初始化 dhtmlxGantt。该方法参数为甘特图渲染的 HTML 容器的 ID。
myGantt.html
<!DOCTYPE html>
<html>
<head>
<title>How to Start with 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>
如果你使用全屏模式,请添加如下 CSS 以保证显示正常:
<style type="text/css" media="screen"> html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
现在,我们将用一个示例数据源为甘特图填充数据。这里以内联对象作为数据源。
加载数据时,使用 parse 方法,并将数据源作为参数传入。
对象属性说明如下:
myGantt.html
var tasks = {
data:[
{id:1, text:"Project #1",start_date:"01-04-2013", duration:11,
progress: 0.6, open: true},
{id:2, text:"Task #1", start_date:"03-04-2013", duration:5,
progress: 1, open: true, parent:1},
{id:3, text:"Task #2", start_date:"02-04-2013", duration:7,
progress: 0.5, open: true, parent:1},
{id:4, text:"Task #2.1", start_date:"03-04-2013", duration:2,
progress: 1, open: true, parent:3},
{id:5, text:"Task #2.2", start_date:"04-04-2013", duration:3,
progress: 0.8, open: true, parent:3},
{id:6, text:"Task #2.3", start_date:"05-04-2013", duration:4,
progress: 0.2, open: true, parent:3}
],
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)
命令:myGantt.html
gantt.init("gantt_here");
gantt.parse (tasks);
Related sample: Basic initialization
本步骤及后续步骤适用于需要从数据库加载数据而非使用内联数据的场景。
接下来,需建立两个表,用于存储任务和依赖关系。
sortorder 字段仅在从数据库加载数据时使用,用于确定同级任务的顺序。
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 DEFAULT 0,
`progress` float NOT NULL DEFAULT 0,
`sortorder` int(11) NOT NULL DEFAULT 0,
`parent` int(11) NOT NULL,
PRIMARY KEY (`id`)
);
为确保任务即使某些字段为空也能正常保存,请在 myGantt.html 文件中添加如下代码:
myGantt.html
gantt.attachEvent("onBeforeTaskAdd", function(id,task){
task.sortorder = 0;
return true;
});
接下来的两个步骤将使用 PHP 进行前后端集成。
如果你使用其他平台,请参阅 数据加载 文章,获取自定义服务器脚本的实现方法。
现在,我们将实现从数据库加载数据到甘特图。使用 load 方法,该方法接收一个指向数据源的 URL。
对于数据库访问,该 URL 指向负责服务器端逻辑的 PHP 文件。
这里我们使用 PHP 和 dhtmlxConnector 库,简化 dhtmlxGantt 的服务器端集成。
data.php
<?php
include ('codebase/connector/gantt_connector.php');
$res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
$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"
);
?>
gantt.config.date_format
属性设置为 "%Y-%m-%d %H:%i",以保证日期格式与 dhtmlxGantt 的格式一致。
myGantt.html
gantt.config.date_format = "%Y-%m-%d %H:%i"; gantt.init("gantt_here");
gantt.load('data.php')
,即可将数据库中的数据加载到甘特图中。
myGantt.html
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');//loads data to Gantt from the database
请注意,在 $connector->render_table 方法中,列的顺序非常重要。列表中的前三列始终对应客户端任务对象的 start_date/duration/text 或 start_date/end_date/text 属性,无论你使用的列名是什么。具体映射逻辑如下所述。
如果在配置中指定了 'duration',第二列会被分配给 task.duration:
$gantt->render_table("gantt_tasks","id","Start,duration,Name,progress,parent","");
或者,使用别名:
$gantt->render_table("gantt_tasks","id","Start,Length(duration),Name,progress,parent","");
// JS: task.start_date, task.duration, task.text, task.progress, task.parent
如果使用了不同的列名,第二列将会映射到 end_date 属性:
$gantt->render_table("gantt_tasks","id","Start,End,Name,progress,parent","");
// JS: task.start_date, task.end_date, task.text, task.progress, task.parent
所有其他列都将直接按照它们的名称进行映射,不做修改:
$gantt->render_table("gantt_tasks","id","start_date,duration,text,custom,parent","");
// JS: task.start_date, task.duration, task.text, task.custom, task.parent
也可以为其他列使用别名:
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,custom_column(customProperty),parent","");
// JS: task.start_date, task.duration, task.text, task.customProperty, task.parent
接下来,需要确保在甘特图中所做的更改能够保存回数据库。为此,将使用 dataProcessor 辅助库。该过程包括初始化 DataProcessor 并将其链接到 dhtmlxGantt 实例。
dataProcessor("data.php")
命令创建一个新的 dhtmlxDataProcessor 实例。dp.init(gantt)
将 dhtmlxDataProcessor 对象连接到 dhtmlxGantt 实例。
myGantt.html
gantt.init("gantt_here");
gantt.load('data.php');
var dp=new gantt.dataProcessor("data.php"); dp.init(gantt);
如果一切设置无误但仍有问题,可以启用 Gantt 的日志功能来帮助定位问题。
首先,确保包含 HTML 文件的目录有写入权限。然后,在 data.php 文件中添加以下代码:
data.php
$gantt = new JSONGanttConnector($res);
$gantt->enable_log("log.txt");
之后可以检查 log.txt 文件,查看日志信息。
就是这样!现在已经有了一个可以从数据库加载数据并将修改保存回数据库的基本甘特图。 你可以根据具体需求对其进行调整和扩展。
如需进一步指导,建议阅读以下文章:
Back to top