dhtmlxGantt mit Svelte

Für die Arbeit mit diesem Leitfaden ist ein grundlegendes Verständnis von Svelte-Konzepten und -Mustern hilfreich. Wenn Sie neu bei Svelte sind, sollten Sie einen Blick in die Svelte-Dokumentation werfen, um einen schnellen Einstieg zu erhalten.

DHTMLX Gantt funktioniert nahtlos mit Svelte. Es gibt einige vorbereitete Beispiele, die zeigen, wie man DHTMLX Gantt mit Svelte integriert. Sie können die Online-Beispiele auf Replit ansehen.

Für eine detailliertere Demo werfen Sie einen Blick auf das GitHub-Repository.

Einrichtung des Projekts

Bevor Sie loslegen, stellen Sie sicher, dass Sie Vite (optional) und Node.js installiert haben.

Um ein Svelte-Projekt zu starten, können Sie Svelte mit Vite verwenden, indem Sie den folgenden Befehl ausführen:

npm create vite@latest

Weitere Details zum Starten eines neuen Projekts finden Sie in der Svelte-Dokumentation.

Installation der Abhängigkeiten

Navigieren Sie zum App-Verzeichnis. Für dieses Beispiel heißt das Projekt gantt-svelte, und die Option svelte wird während der Einrichtung ausgewählt. Verwenden Sie die folgenden Befehle:

cd gantt-svelte

Installieren Sie anschließend die Abhängigkeiten und starten Sie die App mit Ihrem bevorzugten Paketmanager:

Für yarn:

yarn install
yarn dev

Für npm:

npm install
npm run dev

Nach Abschluss sollte das Svelte-Projekt unter http://localhost:5173 laufen.

Gantt Svelte App läuft

Hinzufügen von Gantt

Nun ist es an der Zeit, den DHTMLX Gantt-Code einzufügen. Stoppen Sie zunächst die App mit Strg+C in der Befehlszeile. Fahren Sie dann mit der Installation des Gantt-Pakets fort.

Schritt 1: Installation des Pakets

PRO-Versionen der Bibliothek können über npm/yarn aus einem privaten Repository installiert werden. Anleitungen zum Zugriff auf das Repository finden Sie hier.

Nachdem Sie die Evaluierungsversion von Gantt erhalten haben, installieren Sie sie mit:

Für npm:

npm install @dhx/trial-gantt

Für yarn:

yarn add @dhx/trial-gantt

Alternativ können Sie die Bibliothek aus einem lokalen Ordner installieren, wenn Sie ein ZIP-Paket haben. Anleitungen sind hier verfügbar.

Schritt 2: Erstellen einer Gantt-Komponente

Eine neue Svelte-Komponente wird benötigt, um das Gantt-Diagramm in die App einzubetten. Erstellen Sie eine Datei namens Gantt.svelte im Verzeichnis src/.

Importieren der Quelldateien

Öffnen Sie Gantt.svelte und importieren Sie die notwendigen Gantt-Dateien. Abhängig von der Installationsmethode variieren die Importpfade:

Für eine Installation aus einem lokalen Ordner:

import { Gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

Für die Testversion:

import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";

Diese Anleitung verwendet die Testversion von Gantt.

Festlegen des Containers und Initialisieren von Gantt

Um das Gantt-Diagramm anzuzeigen, wird ein Container benötigt. Hier ist der Code:

<script>    import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
    import { onMount } from "svelte";
    import { Gantt } from "@dhx/trial-gantt";
 
    let container;
    onMount(() => {
        let gantt = Gantt.getGanttInstance();
        gantt.init(container);
 
        return () => {
            gantt.destructor();
        };
    });
</script>
 
<div bind:this={container} style="width: 100%; height: 100%;"></div>

Um sicherzustellen, dass der Gantt-Container den gesamten Body-Bereich nutzt, entfernen Sie die Standardstile in app.css (zu finden in src/) und ersetzen Sie sie durch:

body, #app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
}

Schritt 3: Hinzufügen von Gantt zur App

Fügen Sie die Gantt-Komponente in die App ein, indem Sie src/App.svelte ändern. Ersetzen Sie den Standardinhalt durch:

<script>  import Gantt from "./Gantt.svelte";
</script>
 
<Gantt/>

Wenn die App neu gestartet wird, sollte ein leeres Gantt-Diagramm erscheinen:

Gantt Svelte init

Schritt 4: Hinzufügen von Daten zu Gantt

Um das Gantt-Diagramm mit Daten zu füllen, erstellen Sie eine Datei data.js im Verzeichnis src/ und fügen Sie Beispieldaten hinzu:

export function getData() {
  const tasks = {
    data: [
      {
        id: "10",
        text: "Projekt #1",
        start_date: "01-04-2025",
        duration: 3,
        order: 10,
        progress: 0.4,
        open: true,
      },
      {
        id: "1",
        text: "Aufgabe #1",
        start_date: "01-04-2025",
        duration: 1,
        order: 10,
        progress: 0.6,
        parent: "10",
      },
      {
        id: "2",
        text: "Aufgabe #2",
        start_date: "02-04-2025",
        duration: 2,
        order: 20,
        progress: 0.6,
        parent: "10",
      },
    ],
    links: [{ id: 1, source: 1, target: 2, type: "0" }],
  };
  return tasks;
}

Übergeben Sie diese Daten an die Gantt-Komponente in App.svelte:

<script>  import Gantt from "./Gantt.svelte";
  import { getData } from "./data.js";
</script>
 
<Gantt tasks={getData()} />

In der Gantt-Komponente verwenden Sie die Methode gantt.parse(), um die Daten zu verarbeiten:

<script>    import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
    import { onMount } from "svelte";
    import { Gantt } from "@dhx/trial-gantt";
 
    export let tasks;
 
    let container;
    onMount(() => {
        let gantt = Gantt.getGanttInstance();
        gantt.init(container);
        gantt.parse(tasks);
 
        return () => {
            gantt.destructor();
        };
    });
</script>
 
<div bind:this={container} style="width: 100%; height: 100%;"></div>

Nach dem Aktualisieren der App sollte das Gantt-Diagramm nun Aufgaben anzeigen:

Gantt Aufgaben

Schritt 5: Umgang mit Datenänderungen

Um Änderungen im Gantt-Diagramm zu verfolgen, verwenden Sie einen dataProcessor Handler. Dieser Handler kommuniziert mit dem Backend und verarbeitet serverseitige Antworten.

So erstellen Sie einen DataProcessor:

gantt.createDataProcessor(function(entity, action, data, id) {
    gantt.message(`${entity} ${action}`);
});

Wenn das Backend die Aufgaben-ID nach dem Erstellen eines neuen Datensatzes ändert, stellen Sie sicher, dass das Promise ein Objekt wie {id: databaseId} oder {tid: databaseId} zurückgibt. Dadurch kann Gantt den Datensatz mit der neuen ID aktualisieren. Weitere Informationen finden Sie in der serverseitigen Dokumentation.

Die Svelte Gantt-Einrichtung ist abgeschlossen. Erkunden Sie gerne die vollständige Demo auf GitHub.

Sicherheitsüberlegungen

Beachten Sie, dass Gantt keine Anwendungssicherheit wie die Verhinderung von SQL-Injection, XSS oder CSRF-Angriffen behandelt. Entwickler sind dafür verantwortlich, das Backend zu sichern. Tipps zur Verbesserung der Anwendungssicherheit finden Sie im Leitfaden zur Anwendungssicherheit.

Zurück nach oben