addLinkLayer
Diese Funktion ist nur in der PRO-Edition verfügbar.
Description
Zeigt eine zusätzliche Ebene mit benutzerdefinierten Elementen für einen Link im Timeline-Bereich
addLinkLayer: (func: AdditionalLinkLayer['LinkLayerRender'] | AdditionalLinkLayer['LinkLayerConfig']) => string
Parameters
func- (required) LinkLayerRender | LinkLayerConfig - eine Renderfunktion oder ein Konfigurationsobjekt
Returns
layerId- (string) - ein DOM-Element, das in der Ebene angezeigt wird
Example
gantt.attachEvent("onGanttReady", function () {
const link_types = ["FS", "SS", "FF", "SF"]
gantt.addLinkLayer(function (link) {
const node = gantt.getLinkNode(link.id);
if (node){
const el = document.createElement('div');
el.className = 'link_layer';
el.style.left = (node.childNodes[2].offsetLeft + 20) + 'px'
el.style.top = (node.childNodes[2].offsetTop - 6) + 'px'
el.innerHTML = link_types[link.type];
return el;
}
return false;
});
});
Details
Das Argument kann einer der folgenden Typen sein:
-
linkLayerRender (link, timeline, config, viewport): HTMLElement|boolean|void- eine Funktion, die das Link-Objekt als Parameter nimmt und ein DOM-Element zurückgeben muss, das in der Ebene angezeigt wird.
- link - (Link) - das Link-Objekt
- timeline? - (any) - optional, die Timeline-Ansicht
- config? - (GanttConfigOptions) - optional, das Gantt-Konfigurationsobjekt
- viewport? - (LayerViewport) - optional, das Viewport-Objekt
-
linkLayerConfig - (object) - das Konfigurationsobjekt für die zusätzliche Link-Ebene. Enthält die folgenden Eigenschaften:
- id? - (string | number) - optional, die Layer-ID
- renderer - (object) - obligatorisch, eine Funktion zur Renderierung der Layer-Elemente
- render - (LinkLayerRender) - die Funktion, die das HTML-Element zurückgibt, das gerendert werden soll
- update? - (Function): void - optional, eine Funktion, mit der Sie die gerenderten HTML-Elemente aktualisieren können
- link - (Link) - das Link-Objekt
- node - (HTMLElement) - der Container des gerenderten Knotens
- timeline? - (any) - optional, die Timeline-Ansicht
- config? - (GanttConfigOptions) - optional, das Gantt-Konfigurationsobjekt
- viewport? - (LayerViewport) - optional, das Viewport-Objekt
- onrender? - (Function): void - optional, diese Funktion wird nach Abschluss des Renderings aufgerufen. Sie können sie verwenden, um native Komponenten zu rendern (zum Beispiel mit der
ReactDOM.render-Methode)- link - (Link) - das Link-Objekt
- node - (HTMLElement) - der Container des gerenderten Knotens
- view? - (any) - optional, die Layout-Zelle, in der die Ebene hinzugefügt wird (Timeline, standardmäßig)
- getRectangle? - (Function): { left: number, top: number, height: number, width: number } | void - optional, eine Funktion, die die Koordinaten des Viewport-Rechtecks zurückgibt
- link - (Link) - das Link-Objekt
- view? - (any) - optional, die Layout-Zelle, in der die Ebene hinzugefügt wird (Timeline, standardmäßig)
- config? - (GanttConfigOptions) - optional, das Gantt-Konfigurationsobjekt
- gantt? - (GanttStatic) - optional, das Gantt-Objekt
- getVisibleRange - (Function): {start: number, end: number} | undefined | void - eine Funktion, die das Objekt des sichtbaren Bereichs zurückgibt
- gantt? - (GanttStatic) - optional, das Gantt-Objekt
- view? - (any) - optional, die Layout-Zelle, in der die Ebene hinzugefügt wird (Timeline, standardmäßig)
- config? - (GanttConfigOptions) - optional, das Gantt-Konfigurationsobjekt
- datastore? - (any) - optional, der Link-Datenspeicher-Objekt
- viewport? - (LayerViewport) - optional, das Viewport-Objekt
- container? - (HTMLElement) - optional, der Layer-Container
- topmost? - (boolean) - optional, falls true, wird das Element über dem Link angezeigt
- filter? - (Function): boolean - optional, eine Funktion, die ein Link-Objekt als Parameter nimmt. Wenn sie 'false' zurückgibt, wird die 'renderer'-Funktion für einen Link nicht aufgerufen
- link - (Link) - das Link-Objekt
-
Beachten Sie, dass benutzerdefinierte Layer nach dem nächsten Aufruf von gantt.init zurückgesetzt werden
-
Aufruf der gantt.resetLayout()-Methode setzt ebenfalls benutzerdefinierte Layer zurück. Damit benutzerdefinierte Layer auf einer Seite angezeigt werden, müssen Sie nach dem Aufruf von gantt.resetLayout() die Methode gantt.addLinkLayer erneut definieren.