dhtmlxGantt mit React

Um mit dieser Anleitung zu arbeiten, ist es hilfreich, die Grundlagen von React zu kennen. Wenn Sie neu bei React sind, sollten Sie sich vielleicht die Dokumentation für eine Einführung ansehen.

DHTMLX Gantt funktioniert gut mit React, und wir haben einige Beispiele vorbereitet, um zu zeigen, wie es verwendet werden kann. Sie können sich Online-Beispiele auf Replit ansehen oder sich das Demo auf GitHub anschauen.

Projekt erstellen

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

Um ein einfaches React-Projekt einzurichten, können Sie diesen Befehl ausführen:

npx create-vite my-react-gantt-app --template react

Abhängigkeiten installieren

Sobald das Projekt erstellt ist, navigieren Sie in das App-Verzeichnis (in diesem Beispiel heißt es my-react-gantt-app) mit:

cd my-react-gantt-app

Installieren Sie anschließend die erforderlichen Abhängigkeiten und starten Sie den Entwicklungsserver. Abhängig von Ihrem Paketmanager:

• Für yarn:

yarn install
yarn dev

• Für npm:

npm install
npm run dev

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

Gantt erstellen

Als nächstes müssen Sie den DHTMLX Gantt-Code einbinden. Stoppen Sie die App, indem Sie Ctrl+C im Terminal drücken, und fahren Sie dann mit der Installation des Gantt-Pakets fort.

Schritt 1. Paketinstallation

Für PRO-Versionen der Bibliothek können Sie diese aus unserem privaten Repository installieren. Folgen Sie diesen Anweisungen, um Zugang zu erhalten.

Wenn Sie die Evaluierungsversion verwenden, installieren Sie sie mit einem dieser Befehle:

• Mit npm:

npm install @dhx/trial-gantt

• Mit yarn:

yarn add @dhx/trial-gantt

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

Schritt 2. Komponentenerstellung

Erstellen Sie nun eine React-Komponente, um das Gantt-Diagramm in Ihre Anwendung einzubinden. Beginnen Sie mit der Erstellung einer Datei namens Gantt.jsx im src/-Verzeichnis.

Quelldateien importieren

Importieren Sie in der neu erstellten Gantt.jsx-Datei die erforderlichen Gantt-Dateien. Abhängig davon, wie Sie das Gantt-Paket installiert haben, unterscheiden sich die Importpfade:

• Wenn aus einem lokalen Ordner installiert:

Gantt.jsx

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

• Wenn die Evaluierungsversion verwendet wird:

Gantt.jsx

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

Für diese Anleitung verwenden wir die Evaluierungsversion.

Container einrichten und Gantt hinzufügen

Um das Gantt-Diagramm anzuzeigen, richten Sie einen Container dafür ein. Die Gantt.jsx-Datei sollte so aussehen:

Gantt.jsx

import { useEffect, useRef } from "react";
import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default function GanttView() {
  let container = useRef();
 
  useEffect(() => {
    let gantt = Gantt.getGanttInstance();
    gantt.init(container.current);
 
    return () => {
      gantt.destructor();
      container.current.innerHTML = "";
    };
  }, []);
 
  return <div ref={container} style={ {width: "100%", height: "100%"} }></div>;
}

Schritt 3. Gantt zur App hinzufügen

Integrieren Sie nun die Gantt-Komponente in die App. Öffnen Sie src/app.jsx und ersetzen Sie den Standardinhalt durch den folgenden Code:

src/app.jsx

import Gantt from "./Gantt";
 
function App() {
  return <Gantt/>;
}
 
export default App;

Um sicherzustellen, dass der Gantt-Container die gesamte Seite einnimmt, entfernen Sie die Standardstile in index.css (im src/-Verzeichnis) und fügen Sie Folgendes hinzu:

src/index.css

html,
body,
#root {
  height: 100%;
  padding: 0;
  margin: 0;
}

Wenn Sie die App neu starten, sollten Sie ein leeres Gantt-Diagramm auf der Seite sehen:

Schritt 4. Daten bereitstellen

Um das Gantt-Diagramm mit Daten zu füllen, erstellen Sie eine data.js-Datei im src/-Verzeichnis und fügen Sie Folgendes 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 als Nächstes die Daten als Props an die Gantt-Komponente in App.jsx:

App.jsx

import Gantt from "./Gantt";
import { getData } from "./data.js";
 
function App() {
  return <Gantt tasks={getData()} />;
}
 
export default App;

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

Gantt.jsx

import { useEffect, useRef } from "react";
import { Gantt } from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
 
export default function GanttView(props) {
  let container = useRef();
 
  useEffect(() => {
    let gantt = Gantt.getGanttInstance();
    gantt.init(container.current);
    gantt.parse(props.tasks);
 
    return () => {
      gantt.destructor();
      container.current.innerHTML = "";
    };
  }, []);
 
  return <div ref={container} style={ {width: "100%", height: "100%"} }></div>;
}

Wenn Sie die App jetzt neu laden, wird das Gantt-Diagramm die Aufgaben anzeigen:

Schritt 5. Daten speichern

Um Änderungen im Gantt-Diagramm zu verarbeiten, können Sie einen dataProcessor verwenden. Dieser Handler ermöglicht die Kommunikation mit dem serverseitigen Backend. Sie können ihn als Funktion oder Router-Objekt deklarieren. dhtmlxGantt unterstützt Promise-Antworten, um eine reibungslose Verarbeitung von Aktionen zu gewährleisten.

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

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

Wenn Ihr Dienst die Aufgaben-ID beim Erstellen eines neuen Datensatzes ändert, stellen Sie sicher, dass das Promise ein Objekt mit {id: databaseId} oder {tid: databaseId} zurückgibt. Dies stellt sicher, dass Gantt den Datensatz mit der neuen Datenbank-ID aktualisiert. Weitere Details finden Sie in der Server-Seiten-Dokumentation.

Das war's! Ihr React Gantt ist nun einsatzbereit. Fühlen Sie sich frei, das vollständige Demo auf GitHub zu erkunden.

XSS-, CSRF- und SQL-Injection-Angriffe

Beachten Sie, dass Gantt selbst keine Sicherheitsmaßnahmen gegen Bedrohungen wie SQL-Injections, XSS- oder CSRF-Angriffe enthält. Die Verantwortung für die Sicherung der Anwendung liegt bei den Backend-Entwicklern.

Für Tipps zur Verbesserung der Sicherheit Ihrer Anwendung lesen Sie den Artikel Anwendungssicherheit.

Zurück nach oben