dhtmlxGantt с dhtmlxConnector

Это руководство описывает процесс настройки базового диаграммы Ганта, которая может сохранять и обновлять задачи в базе данных (на сервере).

Этот учебник сосредоточен на создании диаграммы Ганта с использованием dhtmlxConnector. Если вы планируете использовать другую серверную технологию, доступны другие учебники для различных интеграций:

Related sample: Basic initialization

Шаг 1. Загрузка пакета dhtmlxGantt

Для начала вам нужно загрузить пакет библиотеки Gantt.

Шаги:

Скачайте пакет dhtmlxGantt с здесь, если вы еще этого не сделали.
Распакуйте пакет в корневой каталог вашего локального веб-сервера. Распакованные файлы будут сохранены в папке с именем "dhtmlxGantt".

Шаг 2. Включение файлов кода dhtmlxGantt

Далее, включите файлы кода библиотеки Gantt в ваш HTML файл, чтобы активировать ее функциональность.

Основные файлы для включения:

`dhtmlxgantt.js`
`dhtmlxgantt.css`

Шаги:

Создайте HTML файл в папке "dhtmlxGantt" (где находятся файлы библиотеки). Назовите его, например, `myGantt.html`.

Включите необходимые файлы в секцию `` вашего HTML файла:

myGantt.html

<!DOCTYPE html>
<html>
<head>
   <title>Как начать с dhtmlxGantt</title>
   <script src="codebase/dhtmlxgantt.js"></script>      <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   </head>
<body>
    //ваш код будет здесь
</body>
</html>

Шаг 3. Инициализация dhtmlxGantt

Теперь создайте контейнер DIV и инициализируйте в нем диаграмму Ганта. Обратите внимание, что dhtmlxGantt является статическим объектом и может быть создан только один раз на странице. Вы можете обращаться к нему, используя dhtmlxGantt или gantt.

Шаги:

Добавьте контейнер DIV в ваш файл `myGantt.html`.

Инициализируйте диаграмму Ганта, используя `gantt.init("gantt_here")`, передав ID контейнера DIV в качестве параметра:

myGantt.html

<!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>

Если вы используете полноэкранный режим, убедитесь, что применили следующие стили для корректной работы:

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

Шаг 4. Загрузка данных в диаграмму Ганта

Чтобы отобразить данные в диаграмме Ганта, используйте пример источника данных. Самый простой способ - определить данные как встроенный объект и загрузить их, используя метод gantt.parse.

Объект данных имеет следующие свойства:

data - содержит задачи Ганта:
- id - уникальный идентификатор задачи.
- start_date - дата начала задачи.
- text - описание задачи.
- progress - прогресс выполнения задачи (от 0 до 1).
- duration - продолжительность задачи в текущих единицах времени.
- parent - ID родительской задачи.
links - содержит ссылки зависимости:
- id - уникальный идентификатор ссылки.
- source - ID исходной задачи.
- target - ID целевой задачи.
- type - тип зависимости (например, 0 для "конец-начало").

Шаги:

Определите переменную `tasks` в вашем файле `myGantt.html`:

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)` после инициализации диаграммы Ганта:

myGantt.html

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

Related sample: Basic initialization

Шаг 5. Создание базы данных

Если вы предпочитаете загружать данные из базы данных, а не из встроенного объекта, вам нужно будет настроить базу данных с двумя таблицами для хранения задач и зависимостей.

Свойство `sortorder` используется только при загрузке данных из базы данных. Оно определяет порядок задач среди дочерних элементов.

Шаги:

Создайте новую базу данных с именем `gantt`.

Выполните следующие SQL команды для создания таблиц `gantt_tasks` и `gantt_links`:

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;
});

Шаг 6. Загрузка данных из базы данных

Чтобы загрузить данные из базы данных, используйте метод gantt.load с URL серверного скрипта в качестве параметра. В этом примере мы будем использовать PHP и библиотеку dhtmlxConnector для упрощения серверной логики.

Шаги:

Создайте PHP файл в папке "dhtmlxGantt" и назовите его `data.php`.

В `data.php` добавьте этот серверный код:

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"
);
?>

В `myGantt.html`, установите свойство `gantt.config.date_format` в `%Y-%m-%d %H:%i` для совместимости с форматом даты в базе данных:

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');

Сопоставление столбцов базы данных

Порядок столбцов в $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

Шаг 7: Обновление данных в базе данных

Чтобы позволить сохранять изменения, внесенные в диаграмму Ганта, обратно в базу данных, используется вспомогательная библиотека dataProcessor. Это включает инициализацию DataProcessor и связывание его с объектом dhtmlxGantt.

Вот что нужно сделать:

Откройте файл myGantt.html и настройте dhtmlxDataProcessor, используя dataProcessor("data.php").

Подключите экземпляр dhtmlxDataProcessor к объекту dhtmlxGantt, используя 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, где вы можете проверить журналы ошибок.

Что дальше?

На данном этапе у вас есть базовая диаграмма Ганта, которая может загружать данные из базы данных и сохранять обновления обратно. Теперь вы можете приступить к настройке и адаптации ее в соответствии с вашими конкретными требованиями.

Для дальнейшего изучения могут быть полезны следующие статьи:

К началу