Leerer Zustand Bildschirm
Ab Version 8.0 enthält die Bibliothek eine Funktion, um einen leeren Bildschirm (auch bekannt als "Empty State") mithilfe eines Platzhalterelements im Raster anzuzeigen, wenn keine Daten im Gantt-Diagramm geladen sind.
Standardmäßig ist dieses Platzhalterelement verborgen. Um es sichtbar zu machen, können Sie die show_empty_state Konfiguration aktivieren:
gantt.config.show_empty_state = true;
Related sample: Show empty state screen
EmptyStateElement Objekt
Das "Empty State"-Feature wird mit einer Vielzahl von API-Methoden bereitgestellt, die von der emptyStateElement Erweiterung stammen.
Diese Funktion ist nicht auf Situationen beschränkt, in denen keine Aufgaben im Gantt-Diagramm geladen sind. Sie kann auch angezeigt werden, wenn Aufgaben geladen, aber herausgefiltert werden, sodass keine sichtbaren Aufgaben auf der Seite verbleiben. Um dieses Szenario zu handhaben, kann die isEnabled() Methode verwendet werden:
gantt.ext.emptyStateElement.isEnabled = function (){
return !gantt.getVisibleTaskCount().length;
}
Wenn Sie es vorziehen, den "Empty State" im Zeitachsenbereich anstelle des Rasters anzuzeigen, können Sie die getContainer() Methode verwenden:
gantt.ext.emptyStateElement.getContainer = function() {
return gantt.$task_data.closest(".gantt_layout_content");
};
Um den Inhalt, der im "Empty State" angezeigt wird, anzupassen, kann die renderContent() Methode angewendet werden:
gantt.ext.emptyStateElement.renderContent = function (container) {
const placeholderTextElement = `<div class='gantt_empty_state_text'>
<div class='gantt_empty_state_text_link' data-empty-state-create-task>
${gantt.locale.labels.empty_state_text_link}</div>
<div class='gantt_empty_state_text_description'>
${gantt.locale.labels.empty_state_text_description}</div>
</div>`;
const placeholderImageElement = "<div class='gantt_empty_state_image'></div>";
const placeholderContainer = `<div class='gantt_empty_state'>
${placeholderImageElement}${placeholderTextElement}</div>`;
container.innerHTML = placeholderContainer;
}