dhtmlxGantt с dhtmlxConnector

В этом руководстве описано, как создать простой Gantt на веб-странице с возможностью сохранения и обновления задач в базе данных (на сервере).

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

gantt_basic

Basic initialization

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

Для начала скачайте пакет библиотеки на свой компьютер.

Выполните следующие шаги:

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

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

Далее подключите файлы dhtmlxGantt в ваш HTML-файл, чтобы использовать возможности библиотеки.

Необходимые файлы dhtmlxGantt:

dhtmlxgantt.js
dhtmlxgantt.css

Выполните следующие шаги:

Создайте HTML-файл внутри папки 'dhtmlxGantt' (где находятся файлы dhtmlxGantt). Например, назовите его 'myGantt.html'.
Подключите файлы dhtmlxGantt в myGantt.html (оба файла находятся в папке 'codebase').

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>

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

Далее создайте контейнер DIV и инициализируйте dhtmlxGantt внутри него.

Учтите, что dhtmlxGantt - это статический объект, и его можно создать только один раз на странице. Обращаться к экземпляру dhtmlxGantt можно через dhtmlxGantt или просто gantt.

Выполните следующие шаги:

Добавьте контейнер DIV в файл myGantt.html.
Инициализируйте dhtmlxGantt командой 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>

Шаг 4. Загрузка данных в Gantt

Теперь заполним Gantt данными из простого источника. Для простоты используем встроенный объект в качестве источника данных.

Для загрузки данных используется метод parse, который принимает источник данных в качестве параметра.

Свойства объекта:

data - содержит задачи Gantt

id - (string, number) уникальный идентификатор задачи.
start_date - (Date) дата начала задачи.
text - (string) описание задачи.
progress - (number) значение от 0 до 1, указывающее процент выполнения задачи.
duration - (number) длительность задачи в единицах текущей шкалы времени.
parent - (number) ID родительской задачи, если есть.

links - определяет зависимости между задачами

id - (string, number) уникальный идентификатор связи.
source - (number) ID исходной задачи.
target - (number) ID целевой задачи.
type - (string) тип зависимости: 0 - 'finish to start', 1 - 'start to start', 2 - 'finish to finish'.

Выполните следующие шаги:

Объявите переменную '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) сразу после gantt.init("gantt_here"):

myGantt.html

gantt.init("gantt_here"); 
gantt.parse (tasks);/*!*/  

Basic initialization

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

заметка

Этот и следующие шаги применимы, если вы хотите загружать данные из базы данных, а не использовать встроенные данные.

Теперь создайте базу данных с двумя таблицами для хранения задач и связей.

/img/tutorial_db_tables.png

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. Загрузка данных из базы данных

заметка

В следующих двух шагах для интеграции клиент-сервер будет использоваться PHP.

Если вы используете другую платформу, смотрите статью Загрузка данных для примера реализации собственного серверного скрипта.

Теперь подключим загрузку данных из базы данных в диаграмму. Для этого используется метод load, который принимает URL источника данных. Для доступа к базе этот URL указывает на PHP-файл, реализующий серверную логику.

Мы будем использовать PHP и библиотеку dhtmlxConnector, которая упрощает серверную интеграцию для dhtmlxGantt.

Выполните следующие шаги:

Создайте 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", чтобы формат даты соответствовал ожидаемому формату 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

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

Далее важно включить возможность сохранения изменений, сделанных в диаграмме Gantt, обратно в базу данных. Для этого будет использоваться вспомогательная библиотека 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 для просмотра записанной информации.

Что дальше?

Готово! Теперь у вас есть базовая диаграмма Gantt, способная загружать данные из базы и сохранять изменения обратно. Далее вы можете настраивать и расширять её под ваши задачи.

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

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

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

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

Шаг 4. Загрузка данных в Gantt​

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

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

Маппинг столбцов базы данных​

Маппинг остальных столбцов​

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

Логирование ошибок​

Что дальше?​

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

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

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

Шаг 4. Загрузка данных в Gantt

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

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

Маппинг столбцов базы данных

Маппинг остальных столбцов

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

Логирование ошибок

Что дальше?