quickInfo 확장 기능

quickInfo 확장 기능에 대한 자세한 내용은 퀵 인포 (터치 지원) 문서에서 확인할 수 있습니다.
quickInfo 객체는 다음과 같은 API를 제공합니다:

메서드

show (id): void - 지정된 엘리먼트에 대해 퀵 인포 팝업을 엽니다
- id - (number | string) - 작업 ID

gantt.ext.quickInfo.show("1");

show (x, y): void - 지정된 좌표에 퀵 인포 팝업을 엽니다
- x - (number | string) - 가로 좌표
- y - (number | string) - 세로 좌표

gantt.ext.quickInfo.show(10,30);

hide (force): HTMLElement - 퀵 인포 팝업을 닫습니다. gantt.config.quick_info_detached가 false로 설정되어 있으면, 팝업은 짧은 애니메이션 후에 사라집니다. 인자로 true를 전달하면 애니메이션 없이 즉시 팝업이 제거됩니다.
- force? - (boolean) - 애니메이션 없이 즉시 팝업을 숨길지 여부

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// 짧은 애니메이션과 함께 팝업 숨기기
gantt.ext.quickInfo.hide();
 
// 팝업 즉시 숨기기
gantt.ext.quickInfo.hide(true);

setContainer (container): void - 퀵 인포가 표시될 컨테이너를 지정합니다. 컨테이너가 지정되지 않으면, QuickInfo는 gantt.$task, gantt.$grid, gantt.$root 중 첫 번째 사용 가능한 노드에 삽입됩니다.
- container - (HTMLElement | string) - 컨테이너 엘리먼트 또는 그 ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

getNode (): HTMLElement | null - 퀵 인포 팝업의 HTMLElement를 반환합니다. 퀵 인포가 초기화되지 않았다면 null을 반환합니다.

const node = gantt.ext.quickInfo.getNode();

표시된 퀵 인포의 DOM 엘리먼트는 다음과 같습니다:

setContent (config): void - 퀵 인포에 내용을 채웁니다
- config? - (object) - 퀵 인포에 대한 선택적 설정 객체로, 다음을 포함할 수 있습니다:
  - taskId? - (string | number) - 선택 사항, 퀵 인포의 액션 버튼과 연결된 작업의 id
  - header? - (object) - 선택 사항, 팝업 편집 폼의 헤더로 다음을 포함할 수 있습니다:
    - title? - (string) - 선택 사항, 팝업 편집 폼의 제목
    - date? - (string) - 선택 사항, 팝업 편집 폼의 날짜
  - content? - (string) - 선택 사항, 팝업 편집 폼의 내용
  - buttons? - (string[]) - 선택 사항, 팝업 편집 폼에 표시될 버튼들
    header와 buttons가 모두 생략된 경우, 퀵 인포 팝업의 해당 섹션은 숨겨집니다.

setContent 메서드의 설정 객체 예시:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

또는,

헤더와 버튼 없이 커스텀 팝업을 생성할 수도 있습니다:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});