dhtmlxGantt mit Vue.js

Um mit diesem Leitfaden zu arbeiten, ist es hilfreich, ein grundlegendes Verständnis von Vue zu haben. Wenn Sie neu darin sind, ist die Vue 3 Dokumentation ein großartiger Ausgangspunkt.

DHTMLX Gantt arbeitet nahtlos mit Vue. Es gibt Beispielcodes, die Ihnen helfen, DHTMLX Gantt mit Vue zu integrieren. Sie können die Online-Beispiele auf Replit erkunden oder sich die Demo auf GitHub ansehen.

Einrichten eines Projekts

Bevor Sie beginnen, stellen Sie sicher, dass Node.js installiert ist.

Um ein neues Vue-Projekt zu erstellen, verwenden Sie den folgenden Befehl:

npm create vue@latest

Dies wird create-vue, das offizielle Vue-Projekt-Scaffolding-Tool, einrichten und ausführen. Für weitere Details lesen Sie den Vue.js Schnellstart.

Abhängigkeiten installieren

Sobald das Projekt erstellt wurde, navigieren Sie mit folgendem Befehl in das App-Verzeichnis (z. B. gantt-vue):

cd gantt-vue

Installieren Sie nun die Abhängigkeiten und starten Sie den Entwicklungsserver. Abhängig vom verwendeten Paketmanager:

Mit yarn:

yarn install
yarn dev

Mit npm:

npm install
npm run dev

Ihr Vue-Projekt sollte nun unter http://localhost:5173 laufen.

Gantt Vue App läuft

Hinzufügen von Gantt

Um DHTMLX Gantt in das Projekt einzubinden, stoppen Sie zuerst die App, indem Sie Strg+C im Terminal drücken. Fahren Sie dann mit der Installation des Gantt-Pakets fort.

Schritt 1. Paket installieren

Die PRO-Versionen der Bibliothek sind über npm/yarn aus einem privaten Repository verfügbar. Lesen Sie diese Anleitung für Zugriffsdaten.

Sobald Sie die Evaluierungsversion haben, installieren Sie sie mit:

Für npm:

npm install @dhx/trial-gantt

Für yarn:

yarn add @dhx/trial-gantt

Alternativ ist das Zip-Paket der Bibliothek auch als npm-Modul strukturiert, sodass Sie es aus einem lokalen Ordner installieren können.

Schritt 2. Erstellen einer Komponente

Um Gantt zur Anwendung hinzuzufügen, erstellen Sie eine Vue-Komponente. Im Verzeichnis src/components/ erstellen Sie eine neue Datei namens Gantt.vue.

Importieren von Quelldateien

Öffnen Sie Gantt.vue und importieren Sie die benötigten Gantt-Dateien. Die Importpfade hängen davon ab, wie Sie das Gantt-Paket installiert haben:

Wenn aus einem lokalen Ordner installiert:

Gantt.vue

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

Bei Verwendung der Testversion:

Gantt.vue

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

Für diesen Leitfaden wird die Testversion verwendet.

Einrichten des Containers und Hinzufügen von Gantt

Um Gantt auf der Seite anzuzeigen, richten Sie einen Container für die Komponente ein:

Gantt.vue

<script>import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default {
  mounted() {
    let gantt = Gantt.getGanttInstance();
    gantt.init(this.$refs.cont);
 
    this.gantt = gantt;
  },
  unmounted() {
    this.gantt.destructor();
    this.$refs.cont.innerHTML = "";
  },
};
</script>
 
<template>
  <div ref="cont" style="width: 100%; height: 100%"></div>
</template>

Um den Gantt-Container den gesamten Bildschirm füllen zu lassen, entfernen Sie die Standardstile in main.css (zu finden in src/assets) und ersetzen Sie sie durch:

src/assets/main.css

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

Schritt 3. Hinzufügen von Gantt zur App

Fügen Sie als Nächstes die Gantt-Komponente zur App hinzu. Öffnen Sie src/App.vue und ersetzen Sie den Standardinhalt durch:

src/App.vue

<script>import Gantt from "./components/Gantt.vue";
 
export default {
  components: { Gantt }
};
</script>
 
<template>
  <Gantt/>
</template>

Nach dem Neustart der App sollten Sie ein leeres Gantt-Diagramm auf der Seite sehen:

Gantt Vue init

Schritt 4. Hinzufügen von Daten

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

src/data.js

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 als Props an die Gantt-Komponente in App.vue:

App.vue

<script>import Gantt from "./components/Gantt.vue";
import { getData } from "./data";
 
export default {
  components: { Gantt },
  data() {
    return {
      tasks: getData(),
    };
  },
};
</script>
 
<template>
  <Gantt :tasks="tasks" />
</template>

Verwenden Sie dann die Props in der gantt.parse()-Methode innerhalb der Gantt-Komponente:

Gantt.vue

<script>import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default {
  props: ["tasks"],
 
  mounted() {
    let gantt = Gantt.getGanttInstance();
    gantt.init(this.$refs.cont);
    gantt.parse(this.tasks);
 
    this.gantt = gantt;
  },
  unmounted() {
    this.gantt.destructor();
    this.$refs.cont.innerHTML = "";
  },
};
</script>
 
<template>
  <div ref="cont" style="width: 100%; height: 100%"></div>
</template>

Beim erneuten Öffnen der App-Seite sollte nun ein Gantt-Diagramm angezeigt werden, das mit Aufgaben gefüllt ist:

Gantt Aufgaben

Schritt 5. Speichern von Daten

Um Änderungen im Gantt-Diagramm zu verfolgen, können Sie einen dataProcessor verwenden. Dies ermöglicht die Kommunikation mit einem serverseitigen Backend. Der Handler kann als Funktion oder Router-Objekt implementiert werden.

So erstellen Sie einen DataProcessor mit der createDataProcessor()-API-Methode:

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

Wenn Ihr Server beim Erstellen eines Datensatzes eine neue Aufgaben-ID zuweist, stellen Sie sicher, dass Ihr Promise ein Objekt wie {id: databaseId} oder {tid: databaseId} zurückgibt. Dies stellt sicher, dass Gantt die neue ID korrekt anwendet. Für weitere Details lesen Sie den Server-seitigen Leitfaden.

Ihre Vue Gantt-Einrichtung ist nun abgeschlossen! Zögern Sie nicht, die vollständige Demo auf GitHub zu erkunden.

Sicherheitsüberlegungen: XSS, CSRF und SQL-Injection

Beachten Sie, dass Gantt keine Funktionen zum Schutz gegen Sicherheitsbedrohungen wie SQL-Injections, XSS oder CSRF-Angriffe enthält. Es ist wichtig, geeignete Sicherheitsmaßnahmen im Backend zu implementieren, um Ihre Anwendung zu schützen.

Für weitere Details lesen Sie den Artikel Anwendungssicherheit, der potenzielle Schwachstellen und Möglichkeiten zur Verbesserung der Sicherheit Ihrer Anwendung hervorhebt.

Zurück nach oben