Migration von älteren Versionen

8.0 -> 9.0

Das Update auf v9.0 führt mehrere breaking changes ein.

Skins zu CSS-Variablen umgestellt

CSS-Skins (Themen) wurden komplett überarbeitet und nutzen nun CSS-Variablen. Während die HTML-Struktur der Komponente und die CSS-Klassennamen größtenteils unverändert geblieben sind, funktionieren CSS-Stile, die für ältere Versionen des Gantt geschrieben wurden, möglicherweise nicht mehr wie beabsichtigt mit v9.0.

Zum Beispiel wurde der folgende Stil verwendet, um Aufgaben je nach Priorität zu färben:

<style>    /* allgemeine Stile zum Überschreiben von Rahmen-/Fortschrittsfarben */
    .gantt_task_line{
        border-color: rgba(0, 0, 0, 0.25);
    }
    .gantt_task_line .gantt_task_progress {
        background-color: rgba(0, 0, 0, 0.25);
    }
 
    /* hoch */
    .gantt_task_line.high {
        background-color: #03A9F4;
    }
    .gantt_task_line.high .gantt_task_content {
        color: #fff;
    }
 
    /* mittel */
    .gantt_task_line.medium {
        background-color: #f57730;
    }
    .gantt_task_line.medium .gantt_task_content {
        color: #fff;
    }
 
    /* niedrig */
    .gantt_task_line.low {
        background-color: #e157de;
    }
    .gantt_task_line.low .gantt_task_content {
        color: #fff;
    }
</style>

Ab v9.0 wird derselbe Effekt mit folgendem Stil erreicht:

<style>    /* hoch */
    .gantt_task_line.high {
        --dhx-gantt-task-background: #d96c49;
        --dhx-gantt-task-color: #fff;
    }
 
    /* mittel */
    .gantt_task_line.medium {
        --dhx-gantt-task-background: #f57730;
        --dhx-gantt-task-color: #fff;
    }
 
    /* niedrig */
    .gantt_task_line.low {
        --dhx-gantt-task-background: #fff;
        --dhx-gantt-task-color: #fff;
    }
</style>

Überprüfen Sie die verfügbaren Variablen auf der Seite Skins-Anpassung.

Die Migration erfordert wahrscheinlich eine Aktualisierung der vorhandenen CSS, um das gewünschte Design zu erzielen.

Einzelne CSS-Datei

Alle Themen sind nun in einer einzigen dhtmlxgantt.css Datei eingebettet.

Um ein bestimmtes Skin zu aktivieren, verwenden Sie die gantt.skin Eigenschaft:

gantt.skin = "material";

Oder die Methode setSkin:

gantt.setSkin("material");

Beachten Sie, dass gantt.setSkin() Gantt neu zeichnen wird.

Wenn Sie ein anderes Skin als terrace verwenden, sind die folgenden Migrationsschritte erforderlich:

1) Ersetzen Sie die CSS-Datei des Skins durch die dhtmlxgantt.css Datei:

<!-- ALT -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt_material.css" type="text/css">
<!-- NEU -->
<link rel="stylesheet" href="./codebase/dhtmlxgantt.css" type="text/css">

2) Aktivieren Sie das erforderliche Skin über JavaScript:

gantt.setSkin("material");
gantt.init("gantt_here");

Eingebaute Unterstützung für Baselines, Deadlines und Einschränkungen

Früher erforderte das Hinzufügen von Baselines manuelles Codieren mit der gantt.addTaskLayer API. Mit Gantt 9.0 haben wir eingebaute Unterstützung für Baseline-Entitäten zusammen mit Deadlines und Aufgabenbeschränkungen eingeführt.

Falls Sie die Standardeinstellungen deaktivieren und Baselines und Deadlines manuell rendern möchten, können Sie die entsprechenden Konfigurationsoptionen verwenden: baselines und deadlines:

// Deaktivierung der eingebauten Baselines-Funktionalität
gantt.config.baselines = false;
 
// Deaktivierung der eingebauten Deadlines-Funktionalität
gantt.config.deadlines = false;

Die eingebaute Anzeige von Aufgabenbeschränkungen kann ebenfalls mit der erweiterten auto_scheduling Konfiguration deaktiviert werden:

gantt.config.auto_scheduling = {
  enabled: true, 
  show_constraints: false };

Es deaktiviert die standardmäßige Anzeige von Aufgabenbeschränkungen, während die Auto-Scheduling-Funktionalität aktiv bleibt.

Sticky Labels in der Zeitleiste

Ab v9.0 sind Zeitskalenbeschriftungen standardmäßig sticky. Das bedeutet, dass die Beschriftungen beim Scrollen auf dem Bildschirm sichtbar bleiben und dem Viewport folgen, bis sie auf natürliche Weise aus dem Sichtbereich scrollen. In früheren Versionen waren die Beschriftungen innerhalb ihrer Zellen zentriert und blieben beim Scrollen nicht sichtbar.

Wenn Sie zum alten Verhalten zurückkehren und sticky Labels deaktivieren möchten, können Sie die sticky Eigenschaft des scale Objekts auf false setzen:

gantt.config.scales = [
  {unit: "year", step: 1, format: "%Y", sticky: false},
  {unit: "month", step: 1, format: "%F", sticky: false},
  {unit: "day", step:1, format: "%j", sticky: false}
];

Promise-Implementierung

Die Bluebird-Bibliothek wurde aus dem Gantt-Bundle ausgeschlossen. Promise verwendet jetzt die native Promise-Implementierung.

7.1 -> 8.0

Ressourcen-Zuweisungen

In früheren Versionen von DHTMLX Gantt wurden Änderungen in Ressourcen-Zuweisungen als Eigenschaften von Aufgabenobjekten an das Backend gesendet, was in einigen Fällen die Integration mit der Backend-API erschwerte.

Ab DHTMLX Gantt v8.0 können Änderungen an Ressourcen und Ressourcen-Zuweisungen über den dataProcessor geleitet werden. Überprüfen Sie den Abschnitt Routing CRUD actions of resources and resource assignments.

Export-Service

Ab v8.0 ist die Import-/Export-Funktionalität in die Gantt-Bibliothek integriert.

Wenn Sie bereits die https://export.dhtmlx.com/gantt/api.js auf Ihrer Seite eingebunden haben, um den Online-Export-Service zu aktivieren, zum Beispiel:

<script src="codebase/dhtmlxgantt.js"></script>
<script src="https://export.dhtmlx.com/gantt/api.js"></script>

Dann müssen Sie die Datei entfernen und die export_api Erweiterung mit der gantt.plugins Methode aktivieren:

gantt.plugins({
    export_api: true
});

Veraltete Klassennamen

Seit v8.0 wurden die folgenden veralteten Klassennamen entfernt und durch neue ersetzt:

".dhtmlx-info" -> ".gantt-info"
".dhtmlx-error" -> ".gantt-info"
".dhtmlx_popup_title" -> ".gantt_popup_title"
".dhtmlx_popup_text" -> ".gantt_popup_text"
".dhtmlx_popup_controls" -> ".gantt_popup_controls"
".dhtmlx_ok_button" -> ".gantt_ok_button"
".dhtmlx_click_me_button" -> ".gantt_click_me_button"
".dhtmlx_popup_button" -> ".gantt_popup_button"
".dhtmlx_modal_box" -> ".gantt_modal_box"
".dhtmlx-" + config.type -> ".gantt-" + config.type
".dhtmlx_" + btn.label.toLowerCase() + "_button" -> ".gantt_" + btn.label.toLowerCase() + "_button"

7.0 -> 7.1

Version 7.1 führt keine breaking changes ein, die eine Änderung des bestehenden Codes erfordern würden.

Es gibt eine geringfügige visuelle Änderung in der Art und Weise, wie Meilensteine gerendert werden, die bei Bedarf durch den Code rückgängig gemacht werden kann. Große Projekte, die das Ressourcen-Panel verwenden, können möglicherweise eine Performance-Abnahme erfahren, die durch die neue Logik der Ressourcen-Zuweisungen verursacht wird, dies kann durch Deaktivierung der nicht benötigten Logik gemildert werden.

Meilensteine

Die Größe der Meilenstein-Elemente hat sich im Vergleich zu den vorherigen Versionen geändert, um sicherzustellen, dass die Meilensteine die gleiche Höhe wie normale Balken haben.

Wenn Sie möchten, dass die Meilensteine wie in früheren Versionen aussehen, können Sie die Höhe der Meilenstein-Elemente mit der bar_height Eigenschaft anpassen:

{
    id:23, text:"Mediate milestone", start_date:"13-04-2018", 
    type:"milestone", parent:"15", bar_height: 35
}

Ressourcen-Zuweisungen

Version 7.1 fügt eine komplexe Logik zu Ressourcen-Zuweisungen hinzu, die es ermöglicht, Daten der Ressourcen-Zuweisungen anzugeben und mit den Ressourcen-Zuweisungen über DataStore zu arbeiten. Dies sollte den bestehenden Code nicht beeinflussen, aber die Änderungen können bemerkbare Performance-Überlastung zu Ressourcenberechnungen hinzufügen.

Wenn Sie keine Ressourcen zu bestimmten Daten von Aufgaben zuweisen müssen, können Sie die neue Funktionalität mit der process_resource_assignments Konfiguration deaktivieren, um die Performance zu verbessern:

gantt.config.process_resource_assignments = false;

Neue optionale Eigenschaften von Aufgabenobjekten

Die folgenden Eigenschaften des Aufgabenobjekts werden jetzt von Gantt verarbeitet und beeinflussen die Anzeige von Aufgaben:

"task.row_height"
"task.bar_height"
"task.hide_bar"
"task.rollup"

Wenn Sie benutzerdefinierte Eigenschaften mit denselben Namen haben, sollten Sie diese umbenennen, um Konflikte zu vermeiden.

Tiefenkopie beim Datenparsing

Gantt führte eine Tiefenkopie von Datenobjekten beim Datenparsing von v6.3.2 bis v7.1 durch.
Ab v7.1 ist die Funktionalität standardmäßig deaktiviert.

Sie können das alte Verhalten aktivieren, indem Sie die gantt.config.deepcopy_on_parse auf true setzen:

gantt.config.deepcopy_on_parse = true;

Veraltete Konfiguration

Die gantt.config.task_height Eigenschaft wurde seit v7.1 veraltet. Obwohl die Eigenschaft weiterhin funktioniert und die task_height Konfiguration verwendet wird, wenn sie angegeben ist, sollten Sie besser die neue gantt.config.bar_height Option verwenden:

gantt.config.bar_height = 50;

6.3 -> 7.0

Erweiterungen und Lokalisierungsdateien

Das neueste Update v7.0 führt zwei wesentliche Änderungen in der Struktur des Gantt-Pakets ein:

1) Alle Dateien der Erweiterungen sind jetzt mit der dhtmlxgantt.js Datei gebündelt. Daher müssen Sie, um eine der zusätzlichen Erweiterungen von dhtmlxGantt zu aktivieren, den API-Aufruf verwenden.

Wenn Sie bereits irgendeine Erweiterungsdatei aus dem integrierten Paket auf Ihrer Seite eingebunden haben, zum Beispiel:

<script src="../codebase/dhtmlxgantt.js"></script>
<script src="../codebase/ext/dhtmlxgantt_auto_scheduling.js"></script>

oder

import "dhtmlx-gantt";
import "dhtmlx-gantt/ext/dhtmlxgantt_auto_scheduling";

Dann müssen Sie die Erweiterungsdatei entfernen und die Erweiterung mit der gantt.plugins Methode aktivieren:

gantt.plugins({
   auto_scheduling: true
});

Sehen Sie die vollständige Liste der Erweiterungen hier.

Wenn Sie eine modifizierte Version von Erweiterungsdateien verwenden oder benutzerdefinierte Erweiterungen entwickelt haben, binden Sie sie als Dateien auf einer Seite ein, und sie funktionieren.
Hinweis, dass die dhtmlxgantt_smart_rendering.js und dhtmlxgantt_csp.js Erweiterungen vollständig entfernt wurden und nicht manuell aktiviert werden müssen.

2) Alle Lokalisierungen sind jetzt in die dhtmlxgantt.js Datei eingebettet. Um sie zu aktivieren, verwenden Sie den API-Aufruf.

Wenn Sie irgendeine Lokalisierung auf einer Seite eingebunden haben, müssen Sie sie von der Seite entfernen und die erforderliche Lokalisierung mit gantt.i18n.setLocale aktivieren:

gantt.i18n.setLocale("de");

Wenn Sie eine benutzerdefinierte Lokalisierungsdatei verwenden, kann sie wie zuvor geladen werden.

Standard-Einstellungen der Arbeitszeit wurden geändert

In allen Versionen vor 7.0 waren die Standard-Arbeitszeiten von 8:00 bis 17:00 Uhr, das sind 9 Stunden pro Tag.
Ab v7.0 sind die Arbeitszeiten 8:00-12:00, 13:00-17:00 Uhr, das sind 8 Stunden pro Tag.

Wenn Sie zu den vorherigen Einstellungen zurückkehren möchten, müssen Sie es manuell einstellen:

gantt.setWorkTime({hours: [8, 17]});

Content Security Policy

Die ext/dhtmlxgantt_csp.js Erweiterung wird nicht mehr benötigt, da sie entfernt und durch die csp config ersetzt wurde, die standardmäßig aktiviert ist; die Erweiterung sollte aus dem Gantt entfernt werden.

Da die csp Eigenschaft zur dhtmlxGantt Bibliothek hinzugefügt wurde, werden gültige HTML 5 Attribute, die in jedem Browser verwendet werden können, der HTML5 Doctypes unterstützt, allen Elementen von Gantt zugewiesen.

Daher empfehlen wir, dass Sie bereits vorhandene Attribute mit neuen aktualisieren:

"task_id" -> "data-task-id"
"link_id" -> "data-link-id"
"resource_id" -> "data-resource-id"
"column_index" -> "data-column-index"

Die alten Attribute sind jedoch im Markup enthalten, sodass Ihr Code weiterhin funktioniert, wenn Sie die Attributnamen nicht ändern.

Gestaltung von Gitterzellen

Früher wurde die Ausrichtung von Gitterzellen über display:inline-block erreicht. Ab v7.0 wird display:flex stattdessen verwendet und Zellen werden in einem Flex-Container positioniert.

Diese Änderung beeinflusst nicht die dem Benutzer sichtbare Benutzeroberfläche (sie bleibt zu 100 % identisch) und sollte keine Migrationsprobleme verursachen. Allerdings können einige Regressionen bei der Gestaltung der Gitterzellen auf dieses Update zurückzuführen sein.

"xml_date" Konfiguration und Template und "xml_format" Templates wurden entfernt

In v6.2 veraltete Konfigurationen und Templates wurden in v7.0 entfernt und durch neue ersetzt:

gantt.config.xml_date → gantt.config.date_format
gantt.templates.xml_date → gantt.templates.parse_date
gantt.templates.xml_format → gantt.templates.format_date

Wenn Sie die alten Namen in Ihrem Code bereits definiert haben, funktionieren sie weiterhin. Andernfalls verwenden Sie eine neuere Version der API.

6.2 -> 6.3

Mehrfachauswahl von Aufgaben

Seit v6.3 erlaubt die ext/dhtmlxgantt_multiselect.js Erweiterung automatisch, mehrere Aufgaben, die gleichzeitig ausgewählt sind, horizontal zu ziehen. Wenn Sie diese Funktionalität deaktivieren möchten, verwenden Sie die drag_multiple Eigenschaft und setzen Sie sie auf false (standardmäßig ist sie aktiviert).

gantt.config.drag_multiple = false;

Google Roboto-Schriftart ist nicht mehr in Material-Skin enthalten

Bis v6.3 war die Google Roboto Schriftart via import Anweisung im 'Material' Skin von dhtmlxGantt enthalten. Ab v6.3 wurde der Import entfernt, daher müssen Sie die Roboto Schriftart manuell hinzufügen:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:regular,medium,thin,bold">

Verwendung mit Require.JS

Früher konnten Sie beliebige Namen für verschiedene Dateien der dhtmlxGantt Bibliothek verwenden, die in eine auf RequireJS basierende App eingebunden waren:

requirejs.config({
  paths: {
    "gantt": "../../codebase/dhtmlxgantt",
    "tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "marker": "../../codebase/ext/dhtmlxgantt_marker",
    "locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "tooltip": ["gantt"],
    "marker": ["gantt"],
    "locale_de": ["gantt"],
  }
});
requirejs(["gantt", "tooltip", "marker", "locale_de"],
function (dhx) {
  var gantt = dhx.gantt;
 ...
});

Ab Version 6.3 müssen die Modulnamen gemäß der Ordnerstruktur der dhtmlxGantt Bibliothek festgelegt sein:

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_tooltip": "../../codebase/ext/dhtmlxgantt_tooltip",
    "ext/dhtmlxgantt_critical_path": "../../codebase/ext/dhtmlxgantt_critical_path",
    "locale/locale_de": "../../codebase/locale/locale_de",
  },
  shim: {
    "ext/dhtmlxgantt_tooltip": ["dhtmlxgantt"],
    "ext/dhtmlxgantt_critical_path": ["dhtmlxgantt"],
    "locale/locale_de": ["dhtmlxgantt"],
  }
});
 
requirejs(["dhtmlxgantt", "ext/dhtmlxgantt_tooltip", "ext/dhtmlxgantt_critical_path", 
            "locale/locale_de"], 
function (dhx) {
  var gantt = dhx.gantt;
...
});

Stellen Sie sicher, dass der Modulname für jede Datei im Paket als ein relativer Pfad im 'codebase'-Ordner des Pakets plus der Dateiname angegeben ist, zum Beispiel:

Kernbibliothek:

"dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"

Erweiterungen:

"ext/dhtmlxgantt_critical_path": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_critical_path"
"ext/dhtmlxgantt_tooltip": "./vendor/dhtmlxgantt/ext/dhtmlxgantt_tooltip"

Lokalisierungen:

"locale/locale_de": "./vendor/dhtmlxgantt/locale/locale_de"
"locale/locale_be": "./vendor/dhtmlxgantt/locale/locale_be"

Inline-Editoren

Vor Version 6.3 waren die minimalen und maximalen Werte des date Inline-Editors auf die auf der Zeitskala sichtbaren Daten beschränkt, es sei denn, es wurden benutzerdefinierte Min-/Max-Werte bereitgestellt.

Ab v6.3 gibt es keine Standardlimits für minimale und maximale Werte von Datums-Editoren.

Um das vorherige Verhalten wiederherzustellen, können Sie dynamische min/max Werte angeben:

const dateEditor = {type: "date", map_to: "start_date", 
  min: function(taskId){
    return gantt.getState().min_date
  },
  max: function( taskId ){
    return gantt.getState().max_date
  }
};

6.1 -> 6.2

Das Update auf v6.2 ist im Allgemeinen mit v6.1 kompatibel und sollte keine Änderungen im Code erfordern. Jedoch wurde das Verhalten der Komponente in einigen Bereichen geändert (das alte Verhalten kann über Konfiguration wiederhergestellt werden), und einige APIs wurden veraltet.

Smart Rendering und statischer Hintergrund

Die Smart Rendering-Funktionalität wurde aktualisiert und ist jetzt in die Komponente eingebettet. Sie sollte nun sowohl im Haupt-Zeitachsenbereich als auch in den Ressourcen-Panels funktionieren. Von nun an sollten alle Zeitleisten nur noch Reihen und Zellen rendern, die derzeit sichtbar sind.

Smart Rendering kann über die smart_rendering Konfiguration deaktiviert werden, was Gantt auf das Standardverhalten von v6.1 zurücksetzt:

gantt.config.smart_rendering = false;

Die dhtmlxgantt_smart_rendering Erweiterung wird nicht mehr benötigt und sollte aus Gantt entfernt werden. Die Erweiterung selbst ist noch im Paket verfügbar, falls es zu Kompatibilitätsproblemen kommt. Wenn die Erweiterung zur Seite hinzugefügt wird, wird Gantt in den v6.1 Smart Rendering-Modus zurückkehren.

Das Verhalten der static_background Konfiguration wurde ebenfalls aktualisiert. Ab v6.2 rendert sie PNG-Hintergründe UND alle Zellen, die über eine Template-Funktion eine CSS-Klasse zugewiesen bekommen.

Wenn Sie zum v6.1 Verhalten zurückkehren möchten, verwenden Sie die static_background_cells Konfiguration:

gantt.config.static_background_cells = false;

Zeitskalen-Einstellungen

Die Konfiguration der Zeitskala wurde vereinfacht. Anstatt eine Reihe von Skalen-Einstellungen für jede Skala separat anzugeben, sollten Sie jetzt nur eine Konfigurationsoption scales verwenden, die eine Anzahl von Skalenobjekten mit Einstellungen für sie enthält.

Insgesamt sind die folgenden Zeitskalen-APIs veraltet:

gantt.config.scale_unit
gantt.config.step
gantt.config.date_scale
gantt.templates.date_scale
gantt.config.subscales

Zum Beispiel sieht der folgende Code:

gantt.config.scale_unit = "day"; 
gantt.config.step = 1; 
gantt.config.date_scale = "%d %M"; 
gantt.templates.date_scale = null; 
gantt.config.subscales = [];

Jetzt so aus:

gantt.config.scales = [ { unit:"day", step: 1, format: "%d %M"} ];

task_cell_class Template umbenannt

Das Template, das verwendet wird, um die CSS-Klasse zu definieren, die auf die Zellen des Zeitleistenbereichs angewendet wird, wurde wie folgt umbenannt:

gantt.templates.task_cell_class → gantt.templates.timeline_cell_class

Ein Beispiel für die Verwendung des umbenannten Templates ist:

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
 
gantt.templates.timeline_cell_class = function(task,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

"xml_date" Konfiguration und Template und "xml_format" Templates wurden umbenannt

Unten ist das Schema zum Ersetzen der zuvor verwendeten API:

gantt.config.xml_date → gantt.config.date_format
gantt.templates.xml_date → gantt.templates.parse_date
gantt.templates.xml_format → gantt.templates.format_date

Seit v6.2 sind die Standardwerte der xml_date Konfiguration und der xml_date und xml_format Templates undefiniert. Wenn Sie ihnen keine Werte zugewiesen haben, funktionieren sie nicht.

Gantt wird jedoch weiterhin die alten Namen der Konfiguration und Templates verwenden, sodass, wenn Sie diese APIs in Ihrem Code neu definiert haben, sie wie zuvor funktionieren. Zum Beispiel:

// wird korrekt funktionieren
gantt.templates.xml_date = function(datestring){
    return new Date(datestring);
};

Unbenutzte API entfernt

Die gantt.config.api_date Konfiguration und das gantt.templates.api_date Template wurden aus der API entfernt, da sie nicht im Gantt-Code verwendet wurden. Wenn Sie sie in Ihrem Code verwendet haben, müssen Sie sie erneut deklarieren.

gantt.config.api_date = "%d-%m-%Y %H:%i";
gantt.templates.api_date = gantt.date.date_to_str(gantt.config.api_date);

6.0 -> 6.1

Zeitbeschränkungen und automatisches Scheduling

Die dhtmlxgantt_auto_scheduling.js Erweiterung wurde mit der tasks constraints Funktionalität aufgerüstet. Da diese Funktion das Standardverhalten des automatischen Schedulings ändert, unterstützt Gantt den Kompatibilitätsmodus, der es Ihnen ermöglicht, das vorherige Verhalten wiederherzustellen und Aufgabenbeschränkungen während des automatischen Schedulings nicht zu berücksichtigen.

Um in den Kompatibilitätsmodus zu wechseln, verwenden Sie die folgende Konfigurationsoption:

gantt.config.auto_scheduling_compatibility = true;

Anzeigebereich von Tooltips

Vor Version 6.1 wurden Tooltips nur im Zeitleistenbereich angezeigt. Nach der Veröffentlichung von v6.1 ist die Anzeige von Tooltips nicht mehr begrenzt, und ein Tooltip folgt der Bewegung des Mauszeigers.

Falls erforderlich, können Sie das vorherige Verhalten mit dem folgenden Code vor der Initialisierung von Gantt wiederherstellen:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);

5.2 -> 6.0

In der Version 6.0 wurde die getSlack() Methode veraltet. Zwei Methoden wurden stattdessen hinzugefügt:

getFreeSlack - um den freien Puffer einer Aufgabe zurückzugeben
getTotalSlack - um den gesamten Puffer einer Aufgabe zurückzugeben

Methoden, die in v4.0 als veraltet markiert wurden, funktionieren in v6.0 nicht mehr. Die dhtmlx Objektdefinition wurde aus dhtmlxgantt.js entfernt.

Wenn Sie eine der veralteten Methoden verwenden, müssen Sie sie durch unterstützte Implementierungen gemäß der folgenden Tabelle ersetzen. Es wurden keine Änderungen an den Argumenten oder dem Verhalten der Methoden vorgenommen.

Veraltete Methoden	Funktionierende Methoden
dhtmlx.alert	gantt.alert
dhtmlx.confirm	gantt.confirm
dhtmlx.modalbox	gantt.modalbox
dhtmlx.uid	gantt.uid
dhtmlx.copy	gantt.copy
dhtmlx.mixin	gantt.mixin
dhtmlx.defined	gantt.defined
dhtmlx.bind	gantt.bind
dhtmlx.assert	gantt.assert
window.dataProcessor	gantt.dataProcessor

3.x -> 4.0

Version 4.0 führt einige Änderungen in der öffentlichen API ein, nämlich:

Legacy-Module sowie die Module, die mit dhtmlxSuite-Modulen überschneiden, werden nicht mehr von der dhtmlxGantt-Bibliothek definiert
Häufig verwendete Module, wie dhtmlxMessage, dataProcessor, Ajax wurden in den window.gantt Namespace verschoben und wurden Teil der öffentlichen API von dhtmlxGantt

Ein Fallback zur alten API ist in v4.x enthalten, sodass der für v3.3 und früher geschriebene Code weiterhin funktioniert. In einigen Fällen sind jedoch Änderungen erforderlich. Generell sind alle globalen Deklarationen, außer window.gantt und window.Gantt (nur Enterprise-Version) veraltet und werden in Version 5.0 entfernt.

Veraltete API

Es gibt Methoden, die veraltet sind. Sie werden in v4.x weiterhin funktionieren, aber jedes Mal, wenn sie aufgerufen werden, eine Konsolenwarnung auslösen (nicht für Endbenutzer sichtbar).

Übersicht:

Das dhtmlxMessage Modul wurde vom window.dhtmlx Objekt zum window.gantt Objekt verschoben. Lesen Sie mehr über Message Boxes hier
Der dhtmlxDataProcessor Konstruktor wurde von window.dataProcessor zu window.gantt.dataProcessor verschoben
Hilfsmethoden wie dhtmlx.copy, dhtmlx.uid und dhtmlx.mixin wurden zum window.gantt Objekt verschoben

Wenn Sie diese Methoden verwenden, wird Ihre Anwendung nach dem Update auf v4.0 weiterhin funktionieren, ohne dass sofortige Änderungen erforderlich sind. In Zukunft empfehlen wir, sie auf eine neuere Version der API zu aktualisieren.

Die vollständige Liste der veralteten Methoden umfasst:

Bis Version 3.3	Ab Version 4.0
dhtmlx.alert	gantt.alert
dhtmlx.confirm	gantt.confirm
dhtmlx.modalbox	gantt.modalbox
dhtmlx.uid	gantt.uid
dhtmlx.copy	gantt.copy
dhtmlx.mixin	gantt.mixin
dhtmlx.defined	gantt.defined
dhtmlx.bind	gantt.bind
dhtmlx.assert	gantt.assert
window.dataProcessor	gantt.dataProcessor

Veraltete API

Einige Methoden sind veraltet und werden in Version 4.x nicht mehr verwendet. Wenn Sie diese Methoden oder Objekte noch verwenden, müssen Sie entweder den Code einer Anwendung ändern oder die Datei dhtmlxgantt_deprecated.js in die Seite einfügen.

Übersicht:

window.dhx4 wird nicht mehr von dhtmlxgantt.js definiert
Umgebungsvariablen, die in window.dhx4 definiert waren, sind jetzt im gantt.env Objekt verfügbar
Das Ajax-Modul wurde von dhx4.ajax zu gantt.ajax verschoben
gantt.event, gantt.eventRemove sollten anstelle von dhtmlxEvent/dhtmlxDetachEvent verwendet werden

Die vollständige Liste der veralteten API ist unten angegeben:

Bis Version 3.3	Ab Version 4.0
window.dhtmlxEvent	gantt.event
window.dhtmlxDetachEvent	gantt.eventRemove
window.dhx4.isIE	gantt.env.isIE
window.dhx4.isIE6	gantt.env.isIE6
window.dhx4.isIE7	gantt.env.isIE7
window.dhx4.isIE8	gantt.env.isIE8
window.dhx4.isOpera	gantt.env.isOpera
window.dhx4.isChrome	gantt.env.isChrome
window.dhx4.isKHTML	gantt.env.isKHTML
window.dhx4.isFF	gantt.env.isFF
window.dhx4.isIPad	gantt.env.isIPad

2.0 -> 3.0

1) Um CSS-Konflikte mit dhtmlxScheduler zu vermeiden, wurden die Klassennamen, die von beiden Komponenten verwendet wurden, in dhtmlxGantt umbenannt (alle Klassen bezogen sich auf die Lightbox). Wenn Sie das Styling der Lightbox angepasst haben, besteht die Migration darin, die entsprechenden CSS-Klassen umzubenennen.

Es gibt 2 umbenannte Muster:

Ersetzen Sie '.dhx_gantt_' durch '.gantt_' (.dhx_gantt_duration -> .gantt_duration)
Ersetzen Sie das Präfix '.dhx_' durch '.gantt_' (.dhx_custom_button -> .gantt_custom_button)

Wenn Sie Schwierigkeiten beim Migrieren von CSS-Klassen haben, sehen Sie sich bitte die vollständige Liste der umbenannten Klassen hier an.

2) Die Standardwerte der buttons_right und buttons_left Konfigurationen wurden folgendermaßen geändert:

gantt.config.buttons_left = [
        "dhx_save_btn",
        "dhx_cancel_btn"
];
gantt.config.buttons_right = [
        "dhx_delete_btn"
],
 
-->
 
gantt.config.buttons_left = [
        "gantt_save_btn",
        "gantt_cancel_btn"
];
gantt.config.buttons_right = [
        "gantt_delete_btn"
];

Alte Konfigurationen ("dhx_save_btn", "dhx_cancel_btn", "gantt_delete_btn") funktionieren weiterhin. Änderungen beeinträchtigen kein bestehendes Verhalten.

3) Die folgenden Funktionen sind jetzt nur in der kommerziellen oder Enterprise-Version der Komponente verfügbar (nicht in der GPL-Version von dhtmlxGantt):

Möglichkeit, Tage in Wochen-, Monats-, Zeitachsenansicht auszublenden
Projekte, Meilensteine und andere benutzerdefinierte Typen

1.0 -> 2.0

1) Eine Vielzahl von Objekten (GanttProjectInfo, GanttTaskInfo, GanttChart, GanttProject, GanttTask) wurde durch ein statisches Objekt ersetzt - gantt.
Das gantt-Objekt enthält eine Reihe von Methoden und 2 Hauptattribute: config und templates.

gantt.config - Konfigurationsoptionen für Daten, Skala, Steuerungen usw.
gantt.templates - Formatvorlagen für Daten und Labels, die im Gantt-Diagramm verwendet werden.

2) dhtmlxGantt wird über die init Methode initialisiert
var gantt = new GanttChart() -> gantt.init("gantt_div").

3) Anstelle von GanttProject und GanttTask werden Daten als ein Array von einfachen Objekten mit einer Reihe von Pflichtattributen und beliebigen benutzerdefinierten Attributen gespeichert:

{
    data:[
        {id:1, text:"Project #2", start_date:"01-04-2013", duration:18,
    progress:0.4, open: true},
        {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,
    progress:0.6, parent:1},
        {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,
    progress:0.6, parent:1}
    ],
    links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
  ]
}

4) Das XML-Format wurde geändert, aber das alte XML-Format kann weiterhin geladen werden.

gantt.load("tasks.xml","oldxml");

5) Designzeit-Objekte:

Methoden des GanttProjectInfo Objekts wurden ersetzt durch:
- addTask -> gantt.addTask()
- deleteTask -> gantt.deleteTask()
- getTaskById -> gantt.getTask()
Methoden des GanttTaskInfo Objekts wurden ersetzt durch:
- addChildTask -> gantt.addTask() (das Attribut "parent" des Aufgabenobjekts setzt den Elternteil für die Aufgabe)

6) Laufzeit-Objekte:

dhtmlxGantt 2.0 verwendet keine unterschiedlichen Typen für Projekt- und Aufgabenobjekte. Stattdessen kann jedes Aufgabenobjekt ein Elternobjekt und eine beliebige Anzahl von Kindaufgaben haben.

GanttProject
- Anstelle von getDuration(), getId(), getName(), getPercentCompleted(), getStartDate() werden Projekteigenschaften über gantt.getTask(projectTaskId).{name_of_property} zugegriffen.
GanttTask
- Anstelle von getDuration(), getId(), getName(), getParentTaskId(), getPercentCompleted(), getPredecessorTaskId(), setDuration(, ) werden Aufgabeneigenschaften über gantt.getTask(taskId).{name_of_property} zugegriffen.

Eine Liste von Methoden zum Abrufen von Eltern-/Kindobjekten:

Die ID der übergeordneten Aufgabe kann als gantt.getTask(task_id).parent abgerufen werden. Das Wurzelelement hat keine 'parent'-Eigenschaft.

Zurück nach oben