Dieser Artikel beschreibt die wichtigsten Aspekte der Arbeit mit einer Gantt-Instanz.
Ein häufiges Szenario besteht darin, eine Anwendung mit mehreren Seiten, Tabs oder Ansichten zu erstellen.
Die folgende Methode eignet sich für Angular- oder React-basierte Anwendungen und ist in den kommerziellen, Enterprise- oder Ultimate-Versionen von dhtmlxGantt verfügbar (sie wird in den GPL- oder Individual-Editionen nicht unterstützt):
Eine alternative Methode (kompatibel mit allen Versionen) beinhaltet das manuelle Zurücksetzen aller Elemente.
Sehen Sie sich das Beispiel an, das zeigt, wie diese Methode implementiert werden kann.
Durch Klicken auf die Schaltfläche Recreate Gantt wird Gantt initialisiert, Aufgaben geladen und Ereignisse angehängt. Das Zerstören von Gantt trennt die Ereignisse.
Nachfolgend finden Sie eine Liste wichtiger Überlegungen bei der Verwendung dieser Methode:
Beim Laden einer Seite mit Gantt ist es notwendig, die Ereignis-IDs in einem Array zu speichern, bevor sie hinzugefügt werden:
const onTaskClick = gantt.attachEvent('onTaskClick', (id) => {
gantt.message(`onTaskClick: Task ID: ${id}`);
return true;
}, '');
eventIDs.push(onTaskClick);
Der Wechsel zu einer anderen Seite erfordert das manuelle Trennen der Ereignisse mithilfe der im Array gespeicherten IDs:
eventIDs.forEach(event => gantt.detachEvent(event));
eventIDs = [];
Weitere Details finden Sie im Abschnitt Ereignisse trennen.
Der dataProcessor muss manuell zerstört werden:
dp.destructor();
Beachten Sie, dass nur der dataProcessor zerstört werden sollte. Das Zerstören von Gantt selbst verhindert die weitere Nutzung von Gantt, bis die Seite neu geladen wird.
Diese Elemente können sicher von der Gantt-Instanz mithilfe der Methode clearAll() entfernt werden.
Es gibt keine integrierte Funktion zum Speichern oder Zurücksetzen der Gantt-Konfiguration auf den Standardzustand. Die meisten Konfigurationen werden im Objekt gantt.config gespeichert.
Falls benutzerdefiniertes CSS hinzugefügt wurde, muss es möglicherweise manuell entfernt werden, wenn es Probleme verursacht.
Kalendereinstellungen können manuell mit der Methode gantt.deleteCalendar() entfernt werden.
Zusätzlich zu den oben genannten Punkten könnte es andere Szenarien geben, die zu berücksichtigen sind, obwohl noch nicht alle möglichen Fälle mit diesem Ansatz getestet wurden.
Zurück nach oben