dhtmlxGantt mit dhtmlxConnector

Diese Anleitung führt Sie durch die Einrichtung eines grundlegenden Gantt-Diagramms, das Aufgaben in einer Datenbank (auf dem Server) speichern und aktualisieren kann.

Dieses Tutorial konzentriert sich auf die Erstellung eines Gantt-Diagramms mit dhtmlxConnector. Wenn Sie eine andere serverseitige Technologie verwenden möchten, stehen weitere Tutorials für verschiedene Integrationen zur Verfügung:

Related sample: Basic initialization

Schritt 1. Herunterladen des dhtmlxGantt-Pakets

Zuerst müssen Sie das Gantt-Bibliothekspaket herunterladen.

Schritte:

Holen Sie sich das dhtmlxGantt-Paket von hier, falls Sie dies noch nicht getan haben.
Extrahieren Sie das Paket in das Stammverzeichnis Ihres lokalen Webservers. Die extrahierten Dateien werden in einem Ordner namens "dhtmlxGantt" gespeichert.

Schritt 2. Einbinden der dhtmlxGantt-Code-Dateien

Als Nächstes binden Sie die Code-Dateien der Gantt-Bibliothek in Ihre HTML-Datei ein, um deren Funktionalität zu aktivieren.

Die Hauptdateien, die eingebunden werden müssen, sind:

`dhtmlxgantt.js`
`dhtmlxgantt.css`

Schritte:

Erstellen Sie eine HTML-Datei im Ordner "dhtmlxGantt" (wo sich die Bibliotheksdateien befinden). Benennen Sie sie beispielsweise `myGantt.html`.

Binden Sie die erforderlichen Dateien in den ``-Abschnitt Ihrer HTML-Datei ein:

myGantt.html

<!DOCTYPE html>
<html>
<head>
   <title>How to Start with dhtmlxGantt</title>
   <script src="codebase/dhtmlxgantt.js"></script>      <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   </head>
<body>
    //Ihr Code wird hier sein
</body>
</html>

Schritt 3. Initialisierung von dhtmlxGantt

Erstellen Sie nun einen DIV-Container und initialisieren Sie das Gantt-Diagramm darin. Beachten Sie, dass dhtmlxGantt ein statisches Objekt ist und nur einmal auf einer Seite instanziiert werden kann. Sie können darauf mit dhtmlxGantt oder gantt verweisen.

Schritte:

Fügen Sie einen DIV-Container zu Ihrer `myGantt.html`-Datei hinzu.

Initialisieren Sie das Gantt-Diagramm mit `gantt.init("gantt_here")`, wobei Sie die ID des DIV-Containers als Parameter übergeben:

myGantt.html

<!DOCTYPE html>
<html>
<head>
   <title>How to Start with dhtmlxGantt</title>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style='width:1000px; height:400px;'></div>
    <script type="text/javascript">        gantt.init("gantt_here");
    </script>
</body>
</html>

Wenn Sie den Vollbildmodus verwenden, stellen Sie sicher, dass Sie die folgenden Stile für eine ordnungsgemäße Funktionalität anwenden:

<style type="text/css" media="screen">    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style>

Schritt 4. Laden von Daten in das Gantt-Diagramm

Um Daten im Gantt-Diagramm anzuzeigen, verwenden Sie eine Beispieldatenquelle. Der einfachste Weg ist, die Daten als Inline-Objekt zu definieren und sie mit der Methode gantt.parse zu laden.

Das Datenobjekt hat die folgenden Eigenschaften:

data - enthält Gantt-Aufgaben:
- id - eindeutiger Bezeichner für die Aufgabe.
- start_date - Startdatum der Aufgabe.
- text - Aufgabenbeschreibung.
- progress - Fortschritt der Aufgabe (0 bis 1).
- duration - Aufgabendauer in den aktuellen Zeitskalen-Einheiten.
- parent - ID der übergeordneten Aufgabe.
links - enthält Abhängigkeitsverknüpfungen:
- id - eindeutiger Bezeichner für die Verknüpfung.
- source - ID der Quellaufgabe.
- target - ID der Zielaufgabe.
- type - Typ der Abhängigkeit (z.B. 0 für "Ende zu Anfang").

Schritte:

Definieren Sie eine `tasks`-Variable in Ihrer `myGantt.html`-Datei:

myGantt.html

var tasks = {
    data:[
        {id:1, text:"Project #1",start_date:"01-04-2013", duration:11, progress: 0.6, open: true},
        {id:2, text:"Task #1",   start_date:"03-04-2013", duration:5, progress: 1, open: true, parent:1},
        {id:3, text:"Task #2",   start_date:"02-04-2013", duration:7, progress: 0.5, open: true, parent:1},
        {id:4, text:"Task #2.1", start_date:"03-04-2013", duration:2, progress: 1, open: true, parent:3},
        {id:5, text:"Task #2.2", start_date:"04-04-2013", duration:3, progress: 0.8, open: true, parent:3},
        {id:6, text:"Task #2.3", start_date:"05-04-2013", duration:4, progress: 0.2, open: true, parent:3}
    ],
    links:[
        {id:1, source:1, target:2, type:"1"},
        {id:2, source:1, target:3, type:"1"},
        {id:3, source:3, target:4, type:"1"},
        {id:4, source:4, target:5, type:"0"},
        {id:5, source:5, target:6, type:"0"}
    ]
};

Verwenden Sie den Befehl `gantt.parse(tasks)` nach der Initialisierung des Gantt-Diagramms:

myGantt.html

gantt.init("gantt_here"); 
gantt.parse(tasks);

Related sample: Basic initialization

Schritt 5. Erstellen einer Datenbank

Wenn Sie lieber Daten aus einer Datenbank als aus einem Inline-Objekt laden möchten, müssen Sie eine Datenbank mit zwei Tabellen einrichten, um Aufgaben und Abhängigkeiten zu speichern.

Die Eigenschaft `sortorder` wird nur beim Laden von Daten aus einer Datenbank verwendet. Sie bestimmt die Reihenfolge der Aufgaben unter Geschwistern.

Schritte:

Erstellen Sie eine neue Datenbank namens `gantt`.

Führen Sie die folgenden SQL-Befehle aus, um die Tabellen `gantt_tasks` und `gantt_links` zu erstellen:

CREATE TABLE `gantt_links` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `source` INT(11) NOT NULL,
  `target` INT(11) NOT NULL,
  `type` VARCHAR(1) NOT NULL,
  PRIMARY KEY (`id`)
);
 
CREATE TABLE `gantt_tasks` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `text` VARCHAR(255) NOT NULL,
  `start_date` datetime NOT NULL,
  `duration` INT(11) NOT NULL DEFAULT 0,
  `progress` FLOAT NOT NULL DEFAULT 0,
  `sortorder` INT(11) NOT NULL DEFAULT 0,
  `parent` INT(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Um Aufgaben mit leeren Werten beim Speichern in der Datenbank zu behandeln, fügen Sie diesen Code zu myGantt.html hinzu:

myGantt.html

gantt.attachEvent("onBeforeTaskAdd", function(id, task) {
    task.sortorder = 0;
    return true;
});

Schritt 6. Laden von Daten aus der Datenbank

Um Daten aus einer Datenbank zu laden, verwenden Sie die Methode gantt.load mit der URL eines serverseitigen Skripts als Parameter. Für dieses Beispiel verwenden wir PHP und die dhtmlxConnector-Bibliothek, um die serverseitige Logik zu vereinfachen.

Schritte:

Erstellen Sie eine PHP-Datei im Ordner "dhtmlxGantt" und benennen Sie sie `data.php`.

Fügen Sie in `data.php` diesen serverseitigen Code hinzu:

data.php

<?php
 
include ('codebase/connector/gantt_connector.php');
 
$res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
 
$gantt = new JSONGanttConnector($res);
$gantt->render_links("gantt_links","id","source,target,type");
$gantt->render_table(
    "gantt_tasks",
    "id",
    "start_date,duration,text,progress,sortorder,parent"
);
?>

Setzen Sie in `myGantt.html` die Eigenschaft `gantt.config.date_format` auf `%Y-%m-%d %H:%i`, um die Kompatibilität mit dem Datenbankdatumsformat sicherzustellen:

myGantt.html

gantt.config.date_format = "%Y-%m-%d %H:%i";  gantt.init("gantt_here");

Verwenden Sie `gantt.load('data.php')`, um Daten aus der Datenbank in das Gantt-Diagramm zu laden:

myGantt.html

gantt.config.date_format = "%Y-%m-%d %H:%i";
gantt.init("gantt_here");
gantt.load('data.php');

Zuordnung von Datenbankspalten

Die Reihenfolge der Spalten in $connector->render_table spielt eine entscheidende Rolle. Die ersten drei aufgeführten Spalten werden automatisch mit den start_date/duration/text- oder start_date/end_date/text-Eigenschaften des Aufgabenobjekts auf der Client-Seite verknüpft, unabhängig von den verwendeten Spaltennamen. So funktioniert die Zuordnung:

Wenn die zweite Spalte in Ihrer Konfiguration 'duration' genannt wird, wird sie zu task.duration zugeordnet:

$gantt->render_table("gantt_tasks","id","Start,duration,Name,progress,parent","");

Sie können auch ein Alias verwenden, um das gleiche Ergebnis zu erzielen:

$gantt->render_table("gantt_tasks","id","Start,Length(duration),Name,progress,parent","");
// JS: task.start_date, task.duration, task.text, task.progress, task.parent

Andererseits, wenn die zweite Spalte einen anderen Namen hat, wird sie der end_date-Eigenschaft zugeordnet:

$gantt->render_table("gantt_tasks","id","Start,End,Name,progress,parent","");
// JS: task.start_date, task.end_date, task.text, task.progress, task.parent

Zuordnung zusätzlicher Spalten

Die verbleibenden Spalten werden direkt basierend auf ihren Namen zugeordnet:

$gantt->render_table("gantt_tasks","id","start_date,duration,text,custom,parent","");
// JS: task.start_date, task.duration, task.text, task.custom, task.parent

Aliase können auch auf diese zusätzlichen Spalten angewendet werden:

$gantt->render_table("gantt_tasks","id",
    "start_date,duration,text,custom_column(customProperty),parent","");
// JS: task.start_date, task.duration, task.text, task.customProperty, task.parent

Schritt 7: Aktualisieren von Daten in der Datenbank

Um das Speichern von Änderungen, die im Gantt-Diagramm vorgenommen wurden, in der Datenbank zu ermöglichen, wird die dataProcessor-Hilfsbibliothek verwendet. Dies beinhaltet die Initialisierung des DataProcessors und die Verknüpfung mit dem dhtmlxGantt-Objekt.

So geht's:

Öffnen Sie die myGantt.html-Datei und richten Sie dhtmlxDataProcessor mit dataProcessor("data.php") ein.

Verbinden Sie die dhtmlxDataProcessor-Instanz mit dem dhtmlxGantt-Objekt mit dp.init(gantt).

myGantt.html

gantt.init("gantt_here");
gantt.load('data.php');
 
var dp = new gantt.dataProcessor("data.php");  dp.init(gantt);

Fehlerprotokollierung

Wenn alles korrekt eingerichtet zu sein scheint, aber Probleme weiterhin bestehen, kann die Aktivierung der Protokollierung in Gantt helfen, das Problem zu identifizieren.

Stellen Sie zunächst sicher, dass das Verzeichnis, das die HTML-Datei enthält, Schreibberechtigungen hat. Fügen Sie dann diese Zeile zur data.php-Datei hinzu:

data.php

$gantt = new JSONGanttConnector($res);
 
$gantt->enable_log("log.txt");

Dadurch wird eine log.txt-Datei erstellt, in der Sie nach Fehlerprotokollen suchen können.

Was kommt als Nächstes?

An diesem Punkt haben Sie ein grundlegendes Gantt-Diagramm, das Daten aus einer Datenbank laden und Aktualisierungen darin speichern kann. Jetzt können Sie sich mit der Konfiguration und Anpassung befassen, um es an Ihre spezifischen Anforderungen anzupassen.

Für weitere Erkundungen könnten diese Artikel hilfreich sein:

Zurück nach oben