addLinkLayer

在时间轴区域显示带有自定义元素的额外链接层

string addLinkLayer(LinkLayerRender | LinkLayerConfig func);
funcLinkLayerRender | LinkLayerConfig一个渲染函数或配置对象
string表示将显示的层的DOM元素

Available only in PRO Edition

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

此功能仅在PRO版中可用。

参数可以是以下类型之一:

  • linkLayerRender (link, timeline, config, viewport): HTMLElement|boolean|void - 一个接收link对象并返回要在层中显示的DOM元素的函数。

    • link - (Link) - 链接对象
    • timeline? - (any) - 可选,时间轴视图
    • config? - (GanttConfigOptions) - 可选,甘特图配置对象
    • viewport? - (LayerViewport) - 可选,视口对象
  • linkLayerConfig - (object) - 额外链接层的配置对象,包含以下属性:

    • id? - (string | number) - 可选,层ID
    • renderer - (object) - 必需,负责渲染层元素的对象
      • render - (LinkLayerRender) - 返回要渲染的HTML元素的函数
      • update? - (Function): void - 可选,用于更新已渲染HTML元素的函数
        • link - (Link) - 链接对象
        • node - (HTMLElement) - 渲染节点的容器
        • timeline? - (any) - 可选,时间轴视图
        • config? - (GanttConfigOptions) - 可选,甘特图配置对象
        • viewport? - (LayerViewport) - 可选,视口对象
      • onrender? - (Function): void - 可选,渲染完成后调用,适用于渲染原生组件(例如使用 ReactDOM.render
        • link - (Link) - 链接对象
        • node - (HTMLElement) - 渲染节点的容器
        • view? - (any) - 可选,添加层的布局单元(默认:timeline)
      • getRectangle? - (Function): { left: number, top: number, height: number, width: number } | void - 可选,返回视口矩形坐标
        • link - (Link) - 链接对象
        • view? - (any) - 可选,添加层的布局单元(默认:timeline)
        • config? - (GanttConfigOptions) - 可选,甘特图配置对象
        • gantt? - (GanttStatic) - 可选,甘特图实例
      • getVisibleRange - (Function): {start: number, end: number} | undefined | void - 可选,返回可见范围对象
        • gantt? - (GanttStatic) - 可选,甘特图实例
        • view? - (any) - 可选,添加层的布局单元(默认:timeline)
        • config? - (GanttConfigOptions) - 可选,甘特图配置对象
        • datastore? - (any) - 可选,链接数据存储对象
        • viewport? - (LayerViewport) - 可选,视口对象
    • container? - (HTMLElement) - 可选,层的容器元素
    • topmost? - (boolean) - 可选,若为true,层元素将显示在链接之上
    • filter? - (Function): boolean - 可选,接收链接对象并返回false以跳过该链接的渲染的函数
      • link - (Link) - 链接对象
  • 请注意,自定义层在再次调用 gantt.init 后会被清除

  • 同时,调用 gantt.resetLayout() 会重置自定义层。若要保持其可见,需在调用 resetLayout 后重新应用 gantt.addLinkLayer

Related sample:  Gantt. 带有链接类型的额外层

See also
Back to top