Миграция с более старых версий

8.0 -> 9.0

Обновление до версии 9.0 включает несколько изменений, которые могут привести к несовместимости.

Скины переведены на CSS-переменные

CSS-скины (темы) были полностью переработаны и теперь используют CSS-переменные. Хотя структура HTML компонента и имена CSS-классов в большинстве своем остались без изменений, CSS-стили, написанные для более старых версий Gantt, могут больше не работать должным образом с версией 9.0.

Например, следующий стиль использовался для окрашивания задач в зависимости от их приоритета:

<style>
    /* общие стили для переопределения цвета границ/прогресса */
    .gantt_task_line{
        border-color: rgba(0, 0, 0, 0.25);
    }
    .gantt_task_line .gantt_task_progress {
        background-color: rgba(0, 0, 0, 0.25);
    }
 
    /* высокий */
    .gantt_task_line.high {
        background-color: #03A9F4;
    }
    .gantt_task_line.high .gantt_task_content {
        color: #fff;
    }
 
    /* средний */
    .gantt_task_line.medium {
        background-color: #f57730;
    }
    .gantt_task_line.medium .gantt_task_content {
        color: #fff;
    }
 
    /* низкий */
    .gantt_task_line.low {
        background-color: #e157de;
    }
    .gantt_task_line.low .gantt_task_content {
        color: #fff;
    }
</style>

Начиная с версии 9.0, тот же эффект достигается с помощью следующего стиля:

<style>
    /* высокий */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* средний */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* низкий */
    .gantt_task_line.low {
        --dhx-gantt-task-background: #fff;
        --dhx-gantt-task-color: #fff;
    }
</style>

Проверьте доступные переменные на странице Настройка Скинов.

Миграция, вероятно, потребует обновления существующего CSS для достижения требуемого дизайна.

Один CSS файл

Все темы теперь встроены в единый файл dhtmlxgantt.css.

Чтобы активировать определенный скин, используйте свойство gantt.skin:

gantt.skin = "material";

Или метод setSkin:

gantt.setSkin("material");

Обратите внимание, что gantt.setSkin() перерисует Gantt.

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

1) Замените CSS файл скина на файл dhtmlxgantt.css:

<!-- СТАРЫЙ -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt_material.css" type="text/css">
<!-- НОВЫЙ -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt.css" type="text/css">

2) Включите нужный скин из JavaScript:

gantt.setSkin("material");
gantt.init("gantt_here");

Встроенная поддержка базовых линий, сроков и ограничений

Ранее добавление базовых линий требовало ручного кодирования с использованием API gantt.addTaskLayer. В Gantt 9.0 мы добавили встроенную поддержку базовых линий вместе с сроками и ограничениями задач.

Если вы хотите отключить стандартные настройки и отрисовывать базовые линии и сроки вручную, вы можете использовать соответствующие параметры конфигурации: baselines и deadlines:

// отключение встроенной функциональности базовых линий
gantt.config.baselines = false;
 
// отключение встроенной функциональности сроков
gantt.config.deadlines = false;

Встроенное отображение ограничений задач также можно отключить с помощью расширенной конфигурации auto_scheduling:

gantt.config.auto_scheduling = {
  enabled: true, 
  show_constraints: false };

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

Липкие метки на временной шкале

Начиная с версии 9.0, метки временной шкалы по умолчанию являются липкими. Это означает, что метки остаются видимыми на экране при прокрутке, следуя за областью просмотра, пока они не исчезнут естественным образом. В предыдущих версиях метки были центрированы внутри своих ячеек и не оставались видимыми при прокрутке.

Если вам нужно вернуться к старому поведению и отключить липкие метки, вы можете установить свойство sticky объекта scale в false:

gantt.config.scales = [
  {unit: "year", step: 1, format: "%Y", sticky: false},
  {unit: "month", step: 1, format: "%F", sticky: false},
  {unit: "day", step:1, format: "%j", sticky: false}
];

Реализация Promise

Библиотека Bluebird была исключена из пакета Gantt. Promise теперь использует нативную реализацию Promise.

7.1 -> 8.0

Назначения ресурсов

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

Начиная с DHTMLX Gantt v8.0, изменения, внесенные в ресурсы и назначения ресурсов, могут направляться через dataProcessor. Проверьте раздел Маршрутизация CRUD действий ресурсов и назначений ресурсов.

Сервис экспорта

С версии 8.0 функциональность импорта/экспорта включена в библиотеку Gantt.

Таким образом, если вы уже включили https://export.dhtmlx.com/gantt/api.js на своей странице для активации онлайн-сервиса экспорта, например:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

Тогда вам нужно удалить файл и включить расширение export_api с помощью метода gantt.plugins:

gantt.plugins({
    export_api: true
});

Устаревшие имена классов

С версии 8.0 следующие устаревшие имена классов были удалены и заменены новыми:

  • ".dhtmlx-info" -> ".gantt-info"
  • ".dhtmlx-error" -> ".gantt-info"
  • ".dhtmlx_popup_title" -> ".gantt_popup_title"
  • ".dhtmlx_popup_text" -> ".gantt_popup_text"
  • ".dhtmlx_popup_controls" -> ".gantt_popup_controls"
  • ".dhtmlx_ok_button" -> ".gantt_ok_button"
  • ".dhtmlx_click_me_button" -> ".gantt_click_me_button"
  • ".dhtmlx_popup_button" -> ".gantt_popup_button"
  • ".dhtmlx_modal_box" -> ".gantt_modal_box"
  • ".dhtmlx-" + config.type -> ".gantt-" + config.type
  • ".dhtmlx_" + btn.label.toLowerCase() + "_button" -> ".gantt_" + btn.label.toLowerCase() + "_button"

7.0 -> 7.1

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

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

Вехи

Размер элементов вех изменился по сравнению с предыдущими версиями, чтобы вехи имели такую же высоту, как и обычные полосы.

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

{
    id:23, text:"Mediate milestone", start_date:"13-04-2018", 
    type:"milestone", parent:"15", bar_height: 35
}

Назначения ресурсов

Версия 7.1 добавляет сложную логику к назначениям ресурсов, которая позволяет указывать даты назначений ресурсов и работать с ними через DataStore. Это не должно повлиять на существующий код, но изменения могут добавить заметную нагрузку на производительность при расчетах ресурсов.

Если вам не нужно назначать ресурсы на конкретные даты задач, вы можете отключить новую функциональность, используя конфигурацию process_resource_assignments, чтобы улучшить производительность:

gantt.config.process_resource_assignments = false;

Новые необязательные свойства объектов задач

Следующие свойства объекта задачи теперь обрабатываются Gantt и влияют на отображение задач:

  • "task.row_height"
  • "task.bar_height"
  • "task.hide_bar"
  • "task.rollup"

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

Глубокое копирование при разборе данных

Gantt выполнял глубокое копирование объектов данных при разборе данных с v6.3.2 до v7.1.
Начиная с версии 7.1, функциональность по умолчанию отключена.

Вы можете включить старое поведение, установив gantt.config.deepcopy_on_parse в true:

gantt.config.deepcopy_on_parse = true;

Устаревшая конфигурация

Свойство gantt.config.task_height устарело с версии 7.1. Несмотря на то, что свойство будет продолжать работать, и конфигурация task_height будет использоваться, если указана, вам лучше использовать новый вариант gantt.config.bar_height:

gantt.config.bar_height = 50;

6.3 -> 7.0

Расширения и файлы локалей

Новейшее обновление версии 7.0 вводит два основных изменения в структуру пакета Gantt:

1) Все файлы расширений теперь включены в файл dhtmlxgantt.js. Таким образом, чтобы активировать любое из дополнительных расширений, предоставленных dhtmlxGantt, вам нужно использовать вызов API.

  • Если вы уже включили какие-либо файлы расширений из встроенного пакета на своей странице, например:
<script src="../codebase/dhtmlxgantt.js"></script>
<script src="../codebase/ext/dhtmlxgantt_auto_scheduling.js"></script>

или

import "dhtmlx-gantt";
import "dhtmlx-gantt/ext/dhtmlxgantt_auto_scheduling";

Тогда вам нужно удалить файл расширения и включить расширение, используя метод gantt.plugins:

gantt.plugins({
   auto_scheduling: true
});

См. полный список расширений здесь.

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

  • Обратите внимание, что расширения dhtmlxgantt_smart_rendering.js и dhtmlxgantt_csp.js полностью удалены и не нуждаются в ручном включении.

2) Все локали теперь встроены в файл dhtmlxgantt.js. Чтобы активировать их, используйте вызов API.

  • Если вы включили какую-либо локаль на странице, вам нужно удалить ее со страницы и включить нужную локаль, используя gantt.i18n.setLocale:
gantt.i18n.setLocale("de");
  • Если вы используете пользовательский файл локали, он может быть загружен, как и прежде.

Изменены настройки рабочего времени по умолчанию

Во всех версиях до 7.0 рабочие часы по умолчанию были с 8:00 до 17:00, то есть 9 часов в день.
Начиная с версии 7.0, рабочие часы составляют 8:00-12:00, 13:00-17:00, то есть 8 часов в день.

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

gantt.setWorkTime({hours: [8, 17]});

Политика безопасности контента

Расширение ext/dhtmlxgantt_csp.js больше не требуется, так как оно удалено и заменено на csp config, который включен по умолчанию; расширение должно быть удалено из Gantt.

Поскольку свойство csp добавлено в библиотеку dhtmlxGantt, все элементы Gantt будут получать валидные HTML 5 атрибуты, которые могут быть использованы в любом браузере, поддерживающем HTML5 doctypes.

Поэтому мы рекомендуем обновить уже существующие атрибуты на новые:

Однако старые атрибуты включены в разметку, так что если вы не измените имена атрибутов, ваш код продолжит работать.

Стилизация ячеек грида

Ранее выравнивание ячеек грида достигалось через display:inline-block. Начиная с версии 7.0, используется display:flex, и ячейки располагаются внутри flex-контейнера.

Это изменение не влияет на пользовательский интерфейс, видимый пользователю (он остается 100% идентичным) и не должно вызывать проблем с миграцией. Однако некоторые регрессии в стилизации ячеек грида могут быть связаны с этим обновлением.

Конфигурация "xml_date" и шаблоны, и шаблоны "xml_format" удалены

Устаревшие в версии 6.2 конфигурация и шаблоны удалены в версии 7.0 и заменены новыми:

Если вы уже определили старые имена в своем коде, они продолжат работать. В противном случае используйте новую версию API.

6.2 -> 6.3

Множественный выбор задач

Начиная с версии 6.3 расширение ext/dhtmlxgantt_multiselect.js автоматически позволяет горизонтально перемещать несколько задач, выбранных одновременно. Если вы хотите отключить эту функциональность, используйте свойство drag_multiple и установите его в false (по умолчанию оно включено).

gantt.config.drag_multiple = false;

Шрифт Google Roboto больше не включен в Material skin

До версии 6.3 шрифт Google Roboto был включен в 'Material' skin dhtmlxGantt через оператор import. Начиная с версии 6.3, импорт был удален, поэтому вам нужно добавить шрифт Roboto вручную:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">

Использование с Require.JS

Ранее вы могли использовать любые произвольные имена для различных файлов библиотеки dhtmlxGantt, включенных в приложение на основе RequireJS:

requirejs.config({
  paths: {
    "gantt": "../../codebase/dhtmlxgantt",
    "tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "marker": "../../codebase/ext/dhtmlxgantt_marker",
    "locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "tooltip": ["gantt"],
    "marker": ["gantt"],
    "locale_de": ["gantt"],
  }
});
requirejs(["gantt", "tooltip", "marker", "locale_de"],
function (dhx) {
  var gantt = dhx.gantt;
 ...
});

Начиная с версии 6.3 имена модулей должны быть фиксированными в соответствии со структурой папок библиотеки dhtmlxGantt:

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "ext/dhtmlxgantt_critical_path": "../../codebase/ext/dhtmlxgantt_critical_path",
    "locale/locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "ext/dhtmlxgantt_tooltip": ["dhtmlxgantt"],
    "ext/dhtmlxgantt_critical_path": ["dhtmlxgantt"],
    "locale/locale_de": ["dhtmlxgantt"],
  }
});
 
requirejs(["dhtmlxgantt", "ext/dhtmlxgantt_tooltip", "ext/dhtmlxgantt_critical_path", 
            "locale/locale_de"], 
function (dhx) {
  var gantt = dhx.gantt;
...
});

Убедитесь, что имя модуля для любого файла внутри пакета указано как относительный путь внутри папки 'codebase' пакета плюс имя файла, например:

основная библиотека:

  • "dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"

расширения:

  • "ext/dhtmlxgantt_critical_path": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_critical_path"
  • "ext/dhtmlxgantt_tooltip": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_tooltip"

локали:

  • "locale/locale_de": "./vendor/dhtmlxgantt/locale/locale_de"
  • "locale/locale_be": "./vendor/dhtmlxgantt/locale/locale_be"

Инлайн-редакторы

До версии 6.3 минимальные и максимальные значения date инлайн-редактора были ограничены датами, видимыми на временной шкале, если не были предоставлены пользовательские минимальные/максимальные значения.

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

Чтобы восстановить прежнее поведение, вы можете указать динамические значения min/max:

const dateEditor = {type: "date", map_to: "start_date", 
  min: function(taskId){
    return gantt.getState().min_date
  },
  max: function( taskId ){
    return gantt.getState().max_date
  }
};

6.1 -> 6.2

Обновление до версии 6.2 в целом совместимо с версией 6.1 и не должно требовать каких-либо изменений в коде. Однако, некоторые параметры поведения компонента были изменены (старое поведение может быть восстановлено через конфиг), и некоторые API были устаревшими.

Умная отрисовка и статический фон

Функциональность умной отрисовки была обновлена и теперь встроена в компонент. Теперь она должна работать как в основной временной шкале, так и в панелях ресурсов. Отныне все временные шкалы должны отображать только строки и ячейки, которые в данный момент видимы.

Умную отрисовку можно отключить через конфигурацию smart_rendering, что вернет Gantt к поведению по умолчанию версии 6.1:

gantt.config.smart_rendering = false;

Расширение dhtmlxgantt_smart_rendering больше не требуется и должно быть удалено из Gantt. Само расширение все еще доступно в пакете на случай проблем с совместимостью. Если расширение добавлено на страницу, Gantt вернется к режиму умной отрисовки версии 6.1.

Поведение конфигурации static_background также было обновлено. Начиная с версии 6.2 оно будет отображать фон PNG И любые ячейки, к которым присоединен CSS-класс через функцию шаблона.

Если вам нужно вернуться к поведению версии 6.1, используйте конфигурацию static_background_cells:

gantt.config.static_background_cells = false;

Настройки временной шкалы

Конфигурация временной шкалы была упрощена. Вместо указания множества настроек для каждой шкалы отдельно, теперь следует использовать всего одну опцию конфигурации scales, которая будет содержать ряд объектов шкалы с их настройками.

В общем, следующие API временной шкалы устарели:

  • gantt.config.scale_unit
  • gantt.config.step
  • gantt.config.date_scale
  • gantt.templates.date_scale
  • gantt.config.subscales

Например, код ниже:

gantt.config.scale_unit = "day"; 
gantt.config.step = 1; 
gantt.config.date_scale = "%d %M"; 
gantt.templates.date_scale = null; 
gantt.config.subscales = [];

Теперь выглядит так:

gantt.config.scales = [ { unit:"day", step: 1, format: "%d %M"} ];

Шаблон task_cell_class переименован

Шаблон, используемый для определения CSS-класса, применяемого к ячейкам области временной шкалы, переименован следующим образом:

Пример использования переименованного шаблона:

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
 
gantt.templates.timeline_cell_class = function(task,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

Конфигурация "xml_date" и шаблоны, и шаблоны "xml_format" переименованы

Ниже представлена схема замены ранее использовавшихся API:

Начиная с версии 6.2 значения по умолчанию для конфигурации xml_date, и шаблонов xml_date и xml_format не определены. Таким образом, если вы не назначили им значения, они не будут работать.

Однако Gantt продолжит использовать старые имена конфигурации и шаблонов, так что если вы переопределили эти API в своем коде, они будут работать как прежде. Например:

// будет работать корректно
gantt.templates.xml_date = function(datestring){
    return new Date(datestring);
};

Удалены неиспользуемые API

Конфигурация gantt.config.api_date и шаблон gantt.templates.api_date удалены из API, так как они не использовались внутри кода Gantt. Если вы использовали их в своем коде, вам нужно объявить их снова.

gantt.config.api_date = "%d-%m-%Y %H:%i";
gantt.templates.api_date = gantt.date.date_to_str(gantt.config.api_date);

6.0 -> 6.1

Ограничения по времени и автоматическое планирование

Расширение dhtmlxgantt_auto_scheduling.js было обновлено с функциональностью ограничений задач. Поскольку эта функция изменяет поведение автоматического планирования по умолчанию, Gantt поддерживает режим совместимости, который позволяет восстановить прежнее поведение и не учитывать ограничения задач во время автоматического планирования.

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

gantt.config.auto_scheduling_compatibility = true;

Область отображения тултипов

До версии 6.1 тултипы отображались только внутри области временной шкалы. После выпуска версии 6.1 отображение тултипов не ограничено, и тултип следует за движением указателя мыши.

При необходимости вы можете восстановить прежнее поведение, используя код ниже до инициализации Gantt:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);

5.2 -> 6.0

В версии 6.0 метод getSlack() устарел. Вместо него добавлены два метода:

  • getFreeSlack - для возвращения свободного запаса задачи
  • getTotalSlack - для возвращения общего запаса задачи

Методы, помеченные как устаревшие в версии 4.0, перестали работать в версии 6.0. Определение объекта dhtmlx было удалено из dhtmlxgantt.js.

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

Устаревшие методыРабочие методы
dhtmlx.alertgantt.alert
dhtmlx.confirmgantt.confirm
dhtmlx.modalboxgantt.modalbox
dhtmlx.uidgantt.uid
dhtmlx.copygantt.copy
dhtmlx.mixingantt.mixin
dhtmlx.definedgantt.defined
dhtmlx.bindgantt.bind
dhtmlx.assertgantt.assert
window.dataProcessorgantt.dataProcessor

3.x -> 4.0

Версия 4.0 вводит некоторые изменения в публичный API, а именно:

  • устаревшие модули, а также модули, пересекающиеся с модулями dhtmlxSuite, больше не определяются библиотекой dhtmlxGantt
  • общепринятые модули, такие как dhtmlxMessage, dataProcessor, Ajax, перемещены в пространство имен window.gantt и стали частью публичного API dhtmlxGantt

В версии 4.x включена обратная совместимость с старым API, так что код, написанный для версии 3.3 и ранее, продолжит работать. Однако в некоторых случаях требуются изменения. Как правило, все глобальные объявления, кроме window.gantt и window.Gantt (только версия для предприятия), устарели и будут удалены в версии 5.0.

Устаревший API

Есть методы, которые были устаревшими. Они продолжат работать в версии 4.x, но будут вызывать предупреждение в консоли (не видимо для конечных пользователей) каждый раз, когда они вызываются.

Обзор:

  • модуль dhtmlxMessage перемещен из объекта window.dhtmlx в объект window.gantt. Подробнее о Message Boxes читайте здесь
  • конструктор dhtmlxDataProcessor перемещен из window.dataProcessor в window.gantt.dataProcessor
  • утилитарные методы, такие как dhtmlx.copy, dhtmlx.uid и dhtmlx.mixin, перемещены в объект window.gantt

Если вы используете эти методы, ваше приложение продолжит работать после обновления до версии 4.0 без необходимости вносить немедленные изменения. В будущем мы рекомендуем обновить их до новой версии API.

Полный список устаревших методов включает:

До версии 3.3С версии 4.0
dhtmlx.alertgantt.alert
dhtmlx.confirmgantt.confirm
dhtmlx.modalboxgantt.modalbox
dhtmlx.uidgantt.uid
dhtmlx.copygantt.copy
dhtmlx.mixingantt.mixin
dhtmlx.definedgantt.defined
dhtmlx.bindgantt.bind
dhtmlx.assertgantt.assert
window.dataProcessorgantt.dataProcessor

Устаревший API

Некоторые методы стали устаревшими и больше не будут использоваться в версии 4.x. Если вы все еще используете эти методы или объекты, вам нужно либо изменить код приложения, либо включить файл dhtmlxgantt_deprecated.js на страницу.

Обзор:

  • window.dhx4 больше не определяется dhtmlxgantt.js
  • Переменные окружения, которые были определены в window.dhx4, теперь доступны в объекте gantt.env
  • Модуль Ajax был перемещен из dhx4.ajax в gantt.ajax
  • Вместо dhtmlxEvent/dhtmlxDetachEvent следует использовать gantt.event, gantt.eventRemove

Полный список устаревшего API приведен ниже:

До версии 3.3С версии 4.0
window.dhtmlxEventgantt.event
window.dhtmlxDetachEventgantt.eventRemove
window.dhx4.isIEgantt.env.isIE
window.dhx4.isIE6gantt.env.isIE6
window.dhx4.isIE7gantt.env.isIE7
window.dhx4.isIE8gantt.env.isIE8
window.dhx4.isOperagantt.env.isOpera
window.dhx4.isChromegantt.env.isChrome
window.dhx4.isKHTMLgantt.env.isKHTML
window.dhx4.isFFgantt.env.isFF
window.dhx4.isIPadgantt.env.isIPad

2.0 -> 3.0

1) Чтобы предотвратить конфликты CSS с dhtmlxScheduler, имена классов, которые использовались обоими компонентами, были переименованы в dhtmlxGantt (все классы были связаны с lightbox). Если вы настроили стилизацию для lightbox, миграция будет заключаться в переименовании в соответствующие CSS классы.

Есть 2 переименованных шаблона:

  • Замените '.dhx_gantt_' на '.gantt_' (.dhx_gantt_duration -> .gantt_duration)
  • Замените префикс '.dhx_' на '.gantt_' (.dhx_custom_button -> .gantt_custom_button)

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


2) Значения по умолчанию для конфигураций buttons_right и buttons_left были изменены следующим образом:

gantt.config.buttons_left = [
        "dhx_save_btn",
        "dhx_cancel_btn"
];
gantt.config.buttons_right = [
        "dhx_delete_btn"
],
 
-->
 
gantt.config.buttons_left = [
        "gantt_save_btn",
        "gantt_cancel_btn"
];
gantt.config.buttons_right = [
        "gantt_delete_btn"
];

Старые конфигурации ("dhx_save_btn", "dhx_cancel_btn", "gantt_delete_btn") все еще будут работать. Изменения не нарушают существующее поведение.

3) Следующие функции теперь доступны только в коммерческой или корпоративной версии компонента (недоступны в GPL версии dhtmlxGantt):

  • Возможность скрывать дни в неделе, месяце, временной шкале
  • Проекты, вехи и другие пользовательские типы

1.0 -> 2.0

1) Разнообразие объектов (GanttProjectInfo, GanttTaskInfo, GanttChart, GanttProject, GanttTask) заменены одним статичным объектом - gantt.
Объект gantt содержит набор методов и 2 основных свойства: config и templates.

  • gantt.config - параметры конфигурации для дат, шкалы, элементов управления и т.д.
  • gantt.templates - шаблоны форматирования для дат и меток, используемые в диаграмме Ганта.


2) dhtmlxGantt инициализируется через метод init
var gantt = new GanttChart() -> gantt.init("gantt_div").


3) Вместо GanttProject и GanttTask, данные хранятся как массив простых объектов с набором обязательных свойств и любых пользовательских свойств:

{
    data:[
        {id:1, text:"Project #2", start_date:"01-04-2013", duration:18,
    progress:0.4, open: true},
        {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,
    progress:0.6, parent:1},
        {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,
    progress:0.6, parent:1}
    ],
    links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
  ]
}


4) Формат XML был изменен, но старый формат XML все еще может быть загружен.

gantt.load("tasks.xml","oldxml");

Related sample:  Loading data in Gantt 1.6 format


5) Объекты во время проектирования:

  • Методы объекта GanttProjectInfo заменены на:
  • Методы объекта GanttTaskInfo заменены на:
    • addChildTask -> gantt.addTask() (свойство "parent" объекта задачи устанавливает родителя для задачи)


6) Объекты во время выполнения:

dhtmlxGantt 2.0 не использует разные типы для объектов проекта и задачи. Вместо этого любой объект задачи может иметь 1 родительский объект и любое количество дочерних задач.

  • GanttProject
    • Вместо getDuration(), getId(), getName(), getPercentCompleted(), getStartDate(), свойства проекта доступны через gantt.getTask(projectTaskId).{name_of_property}
  • GanttTask
    • Вместо getDuration(), getId(), getName(), getParentTaskId(), getPercentCompleted(), getPredecessorTaskId(), setDuration(, ) свойства задачи доступны через gantt.getTask(taskId).{name_of_property}

Список методов для получения родительских/дочерних объектов:

Идентификатор родительской задачи может быть получен как gantt.getTask(task_id).parent. Корневой элемент не имеет свойства 'parent'.

К началу