dhtmlxGantt с dhtmlxConnector

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

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

Related sample:  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);

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

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

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

К началу