В этом руководстве описано, как создать простой Gantt на веб-странице с возможностью сохранения и обновления задач в базе данных (на сервере).
Здесь основное внимание уделяется созданию Gantt с помощью dhtmlxConnector. Если вы предпочитаете другую серверную технологию, ниже вы найдете руководства по различным вариантам интеграции:
Related sample: Basic initialization
Для начала скачайте пакет библиотеки на свой компьютер.
Далее подключите файлы dhtmlxGantt в ваш HTML-файл, чтобы использовать возможности библиотеки. Необходимые файлы 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>
//ваш код будет здесь
</body>
</html>
Далее создайте контейнер DIV и инициализируйте dhtmlxGantt внутри него.
Учтите, что dhtmlxGantt — это статический объект, и его можно создать только один раз на странице.
Обращаться к экземпляру dhtmlxGantt можно через dhtmlxGantt или просто gantt.
gantt.init("gantt_here")
. Этот метод принимает ID HTML-контейнера, в котором будет отображаться Gantt.
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>
Теперь заполним Gantt данными из простого источника. Для простоты используем встроенный объект в качестве источника данных.
Для загрузки данных используется метод
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.parse(tasks)
сразу после gantt.init("gantt_here")
: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')
для загрузки данных из базы в Gantt.
myGantt.html
gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');//загружает данные в Gantt из базы данных
Имейте в виду, что порядок столбцов в $connector->render_table имеет значение. Первые три столбца в списке всегда будут соответствовать свойствам start_date/duration/text или start_date/end_date/text клиентского объекта задачи, независимо от используемых вами названий столбцов. Логика маппинга объяснена ниже.
Второй столбец назначается свойству task.duration, если в конфигурации указано '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
Далее важно включить возможность сохранения изменений, сделанных в диаграмме Gantt, обратно в базу данных. Для этого будет использоваться вспомогательная библиотека dataProcessor. Процесс включает инициализацию DataProcessor и его привязку к экземпляру dhtmlxGantt.
dataProcessor("data.php")
.dp.init(gantt)
.
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 для просмотра записанной информации.
Готово! Теперь у вас есть базовая диаграмма Gantt, способная загружать данные из базы и сохранять изменения обратно. Далее вы можете настраивать и расширять её под ваши задачи.
Для дальнейшего изучения рекомендуем ознакомиться со следующими статьями:
К началу