addLinkLayer
在时间轴区域显示带有自定义元素的额外链接层
string addLinkLayer(LinkLayerRender | LinkLayerConfig func);
func | LinkLayerRender | LinkLayerConfig | 一个渲染函数或配置对象 |
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
参数可以是以下类型之一:
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以跳过该链接的渲染的函数
请注意,自定义层在再次调用 gantt.init 后会被清除
- 同时,调用 gantt.resetLayout() 会重置自定义层。若要保持其可见,需在调用 resetLayout 后重新应用 gantt.addLinkLayer。
Related sample: Gantt. 带有链接类型的额外层
See also
Back to top