zeigt eine zusätzliche Ebene mit benutzerdefinierten Elementen für eine Aufgabe im Timeline-Bereich an
| func | TaskLayerRender | TaskLayerConfig | eine Render-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 Funktionalität ist nur in der PRO-Edition verfügbar.
Das Argument kann folgende Typen haben:
taskLayerRender (task, timeline, config, viewport): HTMLElement|boolean|void - eine Funktion, die ein Aufgabenobjekt als Parameter nimmt und ein DOM-Element zurückgeben muss, das in der Ebene angezeigt wird.
taskLayerConfig - (object) - das Konfigurationsobjekt für die zusätzliche Aufgabenebene. Hat die folgenden Eigenschaften:
ReactDOM.render)
Der Layer-Viewport hat diese Eigenschaften:
viewport - (object) - das Layer-Viewport-Objekt
Beachten Sie, dass benutzerdefinierte Ebenen nach dem nächsten Aufruf von gantt.init zurückgesetzt werden.
Smart Rendering versucht, nur die HTML-Elemente anzuzeigen, die dem Benutzer aktuell sichtbar sind und nicht unter horizontalen und vertikalen Scrollleisten verborgen sind.
Im Falle von benutzerdefinierten Ebenen weiß Gantt jedoch nicht, wo benutzerdefinierte Elemente platziert sind, da dies vollständig der Implementierung der benutzerdefinierten Rendering-Funktion überlassen ist.
Als Lösung geht das Smart Rendering davon aus, dass sich ein benutzerdefiniertes Element in derselben Zeile befindet, in der sich seine zugehörige Aufgabe befindet. Benutzerdefinierte Elemente werden zur Seitenmarkierung hinzugefügt, wenn Zeilen ihrer zugehörigen Aufgaben auf dem Bildschirm gerendert werden. In diesem Modus berücksichtigt Gantt die Position der horizontalen Scrollleiste nicht, ein benutzerdefiniertes Element wird in der Markierung gerendert, ist jedoch aufgrund des horizontalen Scrollens nicht auf der Seite sichtbar.
Meistens ist das ausreichend, aber wenn Sie viele Ebenen haben, möchten Sie das Rendering möglicherweise noch weiter optimieren, indem Sie Gantt Informationen zur Position der benutzerdefinierten Elemente bereitstellen.
Dazu müssen Sie den object-Parameter der addTaskLayer()-Methode verwenden und dem renderer-Objekt die folgenden Methoden bereitstellen:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Die Logik des Renderings benutzerdefinierter Elemente ist folgende:
1. Wenn sich die Position des horizontalen Scrolls ändert, erhält das Smart Rendering neue Koordinaten des Bereichs, der derzeit auf dem Bildschirm sichtbar ist.
2. dhtmlxGantt ruft die getRectangle-Funktion für jede Aufgabe/Verbindung auf, um die genauen Koordinaten eines benutzerdefinierten Elements zu erhalten.
3. Wenn die getRectangle-Funktion den Wert null zurückgibt, wird die render-Funktion nicht aufgerufen und das benutzerdefinierte Element wird nicht angezeigt.
4. Wenn die getRectangle-Funktion ein Objekt mit den Koordinaten einer Aufgabe/Verbindung zurückgibt und die erhaltenen Koordinaten in den aktuellen Viewport fallen, wird die render-Funktion aufgerufen, um eine Aufgabe/Verbindung 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;
},
// define getRectangle in order to hook layer with the smart rendering
getRectangle: function(task, view){
return gantt.getTaskPosition(task, task.planned_start, task.planned_end);
}
}
});
Das renderer-Objekt der addTaskLayer()-Methode bietet die Möglichkeit, das Node-Markup eines benutzerdefinierten Elements zu aktualisieren und den sichtbaren Inhalt im aktuellen Viewport über die update-Methode anzuzeigen:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
update: function(task, node, timeline, viewport){
...
// setzen Sie den aktuell sichtbaren Teil des Elements in den inneren HTML-Code des Knotens
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Die update-Methode wird aufgerufen, nachdem das onGanttScroll-Ereignis ausgelöst wurde. Es bietet einen Aufgaben-Knoten (der ursprünglich von der render-Methode erstellt wurde) und einen aktuellen Viewport.
Seit v7.1.8 ermöglicht das renderer-Objekt der addTaskLayer()-Methode das Abrufen eines sichtbaren Bereichs von Aufgabenzeilen mit der getVisibleRange-Funktion:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getVisibleRange: function(){
...
return {
start: indexStart,
end: indexEnd
}
}
}
});
Wenn die getVisibleRange-Funktion anstelle eines Objekts false zurückgibt, nimmt Gantt an, dass der gesamte Bereich der Aufgaben verwendet wird und eine zusätzliche Ebene gerendert wird, auch wenn eine Aufgabe nicht auf dem Bildschirm sichtbar ist.
Das renderer-Objekt der addTaskLayer()-Methode bietet den 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 aufgerufen, wenn immer das Daten-Item der Ebene im DOM gerendert wird. Die Argumente geben Ihnen Zugriff auf das gerenderte Daten-Item, das resultierende DOM-Element und das View-Objekt, das das Rendern aufgerufen hat (Grid oder Timeline).
Der Callback kann entweder verwendet werden, um DOM-Elemente nach dem Rendern im DOM zu modifizieren oder um Drittanbieter-Widgets innerhalb der gerenderten Elemente zu initialisieren.