Особенности экземпляра Gantt

В этой статье рассматриваются ключевые аспекты работы с экземпляром Gantt.

Рассмотрим типичный сценарий — создание приложения с несколькими страницами, вкладками или представлениями.

Следующий способ применяется к приложениям на Angular (или React) и доступен только в коммерческих версиях dhtmlxGantt: Commercial, Enterprise или Ultimate (не поддерживается в редакциях GPL или Individual):

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

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

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

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

Пользовательские события

При загрузке страницы с Gantt сохраните ID событий в массив перед их добавлением:

const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
    gantt.message(`onTaskClick: Task ID: ${id}`);
    return true;
}, '');
eventIDs.push(onTaskClick);

При переходе на другую страницу отвяжите события вручную, используя сохранённые ID:

eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];

Подробнее смотрите в разделе Detaching events.

Data Processor

DataProcessor необходимо уничтожать вручную:

dp.destructor();

Обратите внимание, что нужно уничтожать только dataProcessor, а не сам экземпляр Gantt. Уничтожение Gantt приведёт к невозможности дальнейшего использования до перезагрузки страницы.

Задачи, связи, данные ресурсов, маркеры, пользовательские горячие клавиши

Их можно безопасно очистить из экземпляра Gantt с помощью метода clearAll().

Конфигурация Gantt

Встроенной опции для сохранения или сброса конфигурации Gantt к значениям по умолчанию нет. Большинство настроек хранятся в объекте gantt.config.

CSS

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

Настройки календаря

Настройки календаря следует удалять вручную с помощью метода gantt.deleteCalendar().

Другие случаи

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

К началу