zeigt eine zusätzliche Ebene mit benutzerdefinierten Elementen für Tasks im Timeline-Bereich an
| func | TaskLayerRender | TaskLayerConfig | eine Rendering-Funktion oder ein Konfigurationsobjekt |
| string | ein DOM-Element, das in der Ebene angezeigt wird |
Available only in PRO Edition
gantt.init("gantt_here");
gantt.addTaskLayer(function draw_deadline(task) {
if (task.deadline) {
var el = document.createElement('div');
el.className = 'deadline';
var sizes = gantt.getTaskPosition(task, task.deadline);
el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 'px';
el.setAttribute('title', gantt.templates.task_date(task.deadline));
return el;
}
return false;
});
Diese Funktion ist nur in der PRO-Edition verfügbar.
Das Argument kann einer der folgenden Typen sein:
taskLayerRender (task, timeline, config, viewport): HTMLElement|boolean|void - eine Funktion, die ein Task-Objekt erhält und ein DOM-Element zurückgibt, das in der Ebene angezeigt wird.
taskLayerConfig - (object) - ein Konfigurationsobjekt für die zusätzliche Task-Ebene, welches Folgendes beinhaltet:
ReactDOM.render)
Das Layer-Viewport-Objekt beinhaltet folgende Eigenschaften:
viewport - (object) - das Viewport-Objekt für die Ebene
Beachte, dass benutzerdefinierte Layer nach dem nächsten Aufruf von gantt.init gelöscht werden.
Smart rendering zielt darauf ab, nur diejenigen HTML-Elemente anzuzeigen, die für den Benutzer sichtbar sind, und solche zu vermeiden, die hinter Scrollbars verborgen sind.
Bei benutzerdefinierten Layern weiß Gantt jedoch nicht automatisch, wo sich benutzerdefinierte Elemente befinden, da deren Rendering-Logik vollständig vom Benutzer gesteuert wird.
Um dies zu lösen, geht smart rendering davon aus, dass sich ein benutzerdefiniertes Element in derselben Zeile befindet wie der zugehörige Task. Benutzerdefinierte Elemente werden nur dann dem DOM hinzugefügt, wenn die Zeilen ihrer Tasks auf dem Bildschirm sichtbar sind. Dabei ignoriert Gantt die horizontale Scroll-Position, sodass ein benutzerdefiniertes Element im Markup vorhanden, aber auf der Seite nicht sichtbar sein kann, wenn es horizontal herausgescrollt wurde.
Dies funktioniert in der Regel gut, aber wenn Sie viele Layer haben, möchten Sie möglicherweise das Rendering optimieren, indem Sie Gantt die genauen Positionen der benutzerdefinierten Elemente mitteilen.
Dazu verwenden Sie den object-Parameter der Methode addTaskLayer() und übergeben dem renderer-Objekt diese Methoden:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Der Rendering-Prozess für benutzerdefinierte Elemente funktioniert folgendermaßen:
1. Wenn sich die horizontale Scroll-Position ändert, ermittelt smart rendering die Koordinaten des aktuell sichtbaren Bereichs.
2. dhtmlxGantt ruft für jeden Task/Link getRectangle auf, um die genauen Koordinaten des benutzerdefinierten Elements zu erhalten.
3. Gibt getRectangle null zurück, wird die render-Funktion übersprungen und das benutzerdefinierte Element nicht angezeigt.
4. Gibt getRectangle Koordinaten zurück, die sich mit dem aktuellen Viewport überlappen, wird die render-Funktion aufgerufen, um das benutzerdefinierte Element anzuzeigen.
gantt.addTaskLayer({
renderer: {
render: function draw_planned(task) {
if (task.planned_start && task.planned_end) {
var sizes = gantt.getTaskPosition(task,task.planned_start,task.planned_end);
var el = document.createElement('div');
el.className = 'baseline';
el.style.left = sizes.left + 'px';
el.style.width = sizes.width + 'px';
el.style.top = sizes.top + gantt.config.task_height + 13 + 'px';
return el;
}
return false;
},
// die Definition von getRectangle verknüpft den Layer mit smart rendering
getRectangle: function(task, view){
return gantt.getTaskPosition(task, task.planned_start, task.planned_end);
}
}
});
Das renderer-Objekt in addTaskLayer() unterstützt auch die Aktualisierung des Node-Markups, um nur den sichtbaren Teil eines benutzerdefinierten Elements über die update-Methode anzuzeigen:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
update: function(task, node, timeline, viewport){
...
// aktualisiert das innere HTML des Nodes, um aktuell sichtbare Teile anzuzeigen
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Die update-Methode wird nach dem onGanttScroll-Event ausgelöst und erhält den durch render erzeugten Task-Node sowie den aktuellen Viewport.
Ab Version v7.1.8 unterstützt das renderer-Objekt eine getVisibleRange-Funktion, um den sichtbaren Bereich der Task-Zeilen anzugeben:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getVisibleRange: function(){
...
return {
start: indexStart,
end: indexEnd
}
}
}
});
Wenn getVisibleRange statt eines Objekts false zurückgibt, geht Gantt davon aus, dass alle Tasks sichtbar sind und rendert zusätzliche Layer für alle.
Das renderer-Objekt enthält außerdem einen onrender-Callback:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
onrender: function(item, node, view){
console.log("render", item, node)
}
}
});
Die onrender-Funktion wird jedes Mal aufgerufen, wenn ein Datenobjekt ins DOM gerendert wird. Sie erhält Zugriff auf das Datenobjekt, das resultierende DOM-Element und die Ansicht, die das Rendering ausgelöst hat (grid oder timeline).
Dieser Callback kann verwendet werden, um DOM-Elemente nach dem Rendering zu modifizieren oder Drittanbieter-Widgets innerhalb der gerenderten Elemente zu initialisieren.