dhtmlxGantt с dhtmlxConnector

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

Настоящий учебник предназначен для создания 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> <!-- important -->
  <link href="codebase/dhtmlxgantt.css" rel="stylesheet"> <!-- important -->
</head>
<body>
  <!-- your code will be here -->
</body>
</html>

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

Затем необходимо создать DIV-контейнер и инициализировать dhtmlxGantt внутри него.

Обратите внимание, что dhtmlxGantt является статическим объектом и может быть создан на странице один раз.
Чтобы обратиться к экземпляру dhtmlxGantt, можно использовать dhtmlxGantt или просто gantt.

Делайте следующее:

Определите DIV-контейнер в файле myGantt.html.
Инициализируйте dhtmlxGantt с помощью команды gantt.init("gantt_here"). В качестве параметра метод принимает HTML-контейнер, куда будет помещена диаграмма Ганта.

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>

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

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

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

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

data - указывает задачи Gantt.
- id - (string, number) идентификатор события.
- start_date - (Date) дата начала.
- text - (string) описание задачи.
- progress - (number) число от 0 до 1, показывающее, какой процент задачи выполнен.
- duration - (number) длительность задачи в единицах текущего масштаба времени.
- parent - (number) идентификатор родительской задачи.
- links - указывает зависимые связи Gantt
  - id-(string, number) идентификатор события.
  - source-(number) идентификатор исходной задачи.
  - target-(number) идентификатор целевой задачи.
  - 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. Создание базы данных

заметка

Прочитайте это и последующие шаги, если хотите загружать данные из базы данных вместо встроенного объекта.

Затем нужно создать базу данных с двумя таблицами для хранения задач и зависимостей. sortorder — свойство, которое используется только при загрузке данных из базы данных. Это свойство задаёт индекс задачи среди соседей. Делайте следующее: Создайте новую базу данных с именем - gantt. Выполните приведённый ниже код для создания 2 таблиц в ней: 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 к источнику данных в качестве параметра. В случае базы данных это 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') для загрузки данных из базы данных в диаграмму Гantt.

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 объекта задачи на стороне клиента соответственно, независимо от того, какие имена столбцов вы указываете. Логика сопоставления столбцов описана ниже.

Второй столбец сопоставляется с 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. Обновление данных в базе данных

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

Мы рекомендуем на следующем этапе ознакомиться с этими статьями:

Configuration → Конфигурация
Event handling → Обработка событий
Data loading → Загрузка данных

Need help?

Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.

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

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

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

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

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

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

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

Сопоставление других столбцов​

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

Ведение журнала ошибок​

Что дальше?​

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

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

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

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

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

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

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

Сопоставление других столбцов

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

Ведение журнала ошибок

Что дальше?