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

Эта статья освещает основные особенности использования экземпляра Gantt.

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

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

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

Альтернативный подход (который будет работать во всех версиях) — выполнить сброс всего вручную.

заметка

Ознакомьтесь с примером, который демонстрирует, как можно реализовать этот подход.

Когда вы нажимаете кнопку Recreate Gantt, Gantt инициализируется, загружает задачи и прикрепляет события. Если вы уничтожите Gantt, события будут отсоединены.

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

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

При загрузке страницы с Gantt необходимо вручную сохранить идентификаторы событий в массив до их добавления:

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

Когда вы переходите на другую страницу, необходимо вручную отсоединить события, используя сохранённые вами идентификаторы:

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

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

Data Processor

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

dp.destructor();

Пожалуйста, учтите, что нужно уничтожать только dataProcessor, а не Gantt. В противном случае вы не сможете использовать Gantt до перезагрузки страницы.

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

Вы можете безопасно удалить эти данные из экземпляра Gantt, используя метод clearAll().

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

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

CSS

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

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

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

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

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