addLinkLayer
타임라인 영역에 링크를 위한 커스텀 요소를 포함하는 추가 레이어를 표시합니다
string addLinkLayer(LinkLayerRender | LinkLayerConfig func);
func | LinkLayerRender | 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 - 링크 객체를 받아 레이어에 표시할 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