인라인 에디터 확장

그리드의 인라인 편집에 대한 자세한 내용은 기사 그리드의 인라인 편집에서 확인하십시오.

inlineEditors 객체는 다음 API를 제공합니다:

메서드

작업:

• startEdit (taskId, columnName): void - 지정된 작업/셀에 에디터를 열고 매핑된 값을 설정하며 에디터에 포커스를 둡니다
  • taskId - (number | string) - 작업 ID
  • columnName - (string) - 열 이름
• show (taskId, columnName): void - 지정된 작업/셀에 빈 에디터를 엽니다
  • taskId - (number | string) - 작업 ID
  • columnName - (string) - 열 이름
• setValue (): void - 이미 열려 있는 에디터를 작업의 값으로 채웁니다
• save (): void - 변경 내용을 저장하고 에디터를 숨깁니다
• hide (): void - 변경 내용을 저장하지 않고 에디터를 숨깁니다
• focus (): void - 에디터에 브라우저 포커스를 둡니다
• getState (): object - 상태 객체를 가져옵니다 (id: taskId, columnName: columnName, placeholder: HTMLElement)
• getValue (): string - 에디터의 현재 값을 가져옵니다

상태:

• isChanged (): boolean - 에디터의 현재 값이 초기 값과 다른지 확인합니다
• isVisible (): boolean - 에디터가 열려 있는지 확인합니다

이벤트:

• attachEvent (name, handler): string - inlineEditors 객체에 이벤트 핸들러를 연결합니다
  • name - (string) - 이벤트 핸들러의 이름
  • handler - (Function) - 이벤트가 발생했을 때 호출될 함수
• detachEvent (id): void - attachEvent() 메서드로 연결된 이벤트 핸들러를 제거합니다
  • id - (string) - 연결된 이벤트 핸들러의 ID

내비게이션:

• editNextCell (canChangeRow): void - 현재 에디터를 저장하고 다음 셀로 에디터를 이동합니다
  • canChangeRow? - (boolean) - 마지막 셀 다음의 첫 번째 셀로 이동할 수 있는지 여부를 지정합니다
• editNextRow (skipReadonly): void - 현재 에디터를 저장하고 아래 작업의 같은 셀에 에디터를 엽니다
  • skipReadonly? - (boolean) - 읽기 전용 태스크를 건너뛰고 첫 번째 편집 가능한 태스크의 셀에 에디터를 열 수 있는지 여부를 지정합니다. 기본값은 false이며, 다음 태스크가 읽기 전용인 경우 에디터를 닫습니다.
• editPrevCell (canChangeRow): void - 현재 에디터를 저장하고 이전 셀로 에디터를 이동합니다
  • canChangeRow? - (boolean) - 현재 행의 첫 셀에 도달한 후 위 행의 마지막 셀로 이동할 수 있는지 여부를 지정합니다
• editPrevRow (skipReadonly): void - 현재 에디터를 저장하고 위 작업의 같은 셀에 에디터를 엽니다
  • skipReadonly? - (boolean) - 읽기 전용 태스크를 건너뛰고 첫 번째 편집 가능한 태스크의 셀에 에디터를 열 수 있는지 여부를 지정합니다. 기본값은 false이며, 이전 태스크가 읽기 전용인 경우 에디터를 닫습니다.
• getFirstCell (): string - 그리드에서 편집 가능한 첫 번째 열의 이름을 가져옵니다
• getLastCell (): string - 그리드에서 편집 가능한 마지막 열의 이름을 가져옵니다
• getNextCell (direction): string | null - 다음 편집 가능한 열의 이름을 반환합니다
  • direction - (number) - 다음 셀을 어떤 방향으로 순회할지 지정합니다. 1 - 오른쪽, -1 - 왼쪽

도우미:

• locateCell (node): object | null - 제공된 DOM 요소가 태스크 셀 객체인지 확인하고, 그렇다면 에디터 상태 객체를 반환합니다: (id: taskId, columnName: columnName)
  • node - (HTMLElement) - HTML 요소

마우스/키보드 매핑:

• setMapping (mapping): void - 매핑 객체를 설정합니다
  • mapping - (object) - 매핑 구성 객체:
    • init - (Function): void - 매핑을 초기화하는 메서드
      • inlineEditors - (InlineEditorMethods) - inlineEditors 객체
      • grid - (any) - 그리드 레이아웃 뷰
    • onShow - (Function): void - 인라인 에디터가 열릴 때 호출될 메서드
      • inlineEditors - (InlineEditorMethods) - inlineEditors 객체
      • node - (HTMLElement) - HTML 요소
      • grid - (any) - 그리드 레이아웃 뷰
    • onHide - (Function): void - 인라인 에디터가 닫힐 때 호출될 메서드
      • inlineEditors - (InlineEditorMethods) - inlineEditors 객체
      • node - (HTMLElement) - HTML 요소
      • grid - (any) - 그리드 레이아웃 뷰
    • destroy - (Function): void - 매핑을 파괴하는 메서드
• getMapping (): object - 현재 적용된 매핑 객체를 반환합니다

이벤트

onBeforeEditStart

인수:

• state - (object) - 에디터 상태 객체
  • id - (number | string) - 편집된 작업의 id
  • columnName - (string) - 열 이름

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
   return true;
});

onEditStart

인수:

• state - (object) - 에디터 상태 객체
  • id - (number | string) - 편집된 작업의 id
  • columnName - (string) - 열 이름

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditStart", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});

onBeforeSave

에디터가 닫히고 변경 내용이 저장되기 직전에 발생

인수:

• state - (object) - 에디터 상태 객체
  • id - (number | string) - 편집된 작업의 id
  • columnName - (string) - 열 이름
  • oldValue - (any) - 에디터의 초기 값
  • newValue - (any) - 현재 에디터의 값, 수정 가능

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onBeforeSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
   return true;
});

onSave

에디터로부터 작업이 업데이트된 후에 발생

인수:

• state - (object) - 에디터 상태 객체
  • id - (number | string) - 편집된 작업의 id
  • columnName - (string) - 열 이름
  • oldValue - (any) - 에디터의 초기 값
  • newValue - (any) - 현재 에디터의 값

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onSave", function(state){
   console.log(state);
   // -> { id: itemId, 
   //      columnName: columnName, 
   //      oldValue: value, 
   //      newValue: value
   //    };
});

onEditEnd

인라인 에디터가 숨겨진 직후에 발생

인수:

• state - (object) - 에디터 상태 객체
  • id - (number | string) - 편집된 작업의 id
  • columnName - (string) - 열 이름

var inlineEditors = gantt.ext.inlineEditors;

inlineEditors.attachEvent("onEditEnd", function(state){
   console.log(state);
   // -> {id: itemId, columnName: columnName};
});