Inline Editors Extension

Inline editors 확장에 대한 자세한 정보는 그리드에서 인라인 편집 문서에서 확인하실 수 있습니다.
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 - 이전에 추가한 이벤트 핸들러를 제거합니다.
  • id - (string) - 이벤트 핸들러의 ID

네비게이션:

• editNextCell (canChangeRow): void - 현재 에디터를 저장하고 다음 셀로 이동합니다.
  • canChangeRow? - (boolean) - 현재 행의 마지막 셀 이후에 다음 행의 첫 번째 셀로 이동할 수 있는지 여부
• editNextRow (skipReadonly): void - 현재 에디터를 저장하고 아래 작업의 같은 셀에 에디터를 엽니다.
  • skipReadonly? - (boolean) - true일 경우 읽기 전용 작업을 건너뛰고 아래에서 첫 번째로 편집 가능한 작업에 에디터를 엽니다. false(기본값)이면 다음 작업이 읽기 전용일 때 에디터를 닫습니다.
• editPrevCell (canChangeRow): void - 현재 에디터를 저장하고 이전 셀로 이동합니다.
  • canChangeRow? - (boolean) - 현재 행의 첫 번째 셀 이후에 이전 행의 마지막 셀로 이동할 수 있는지 여부
• editPrevRow (skipReadonly): void - 현재 에디터를 저장하고 위 작업의 같은 셀에 에디터를 엽니다.
  • skipReadonly? - (boolean) - true일 경우 읽기 전용 작업을 건너뛰고 위에서 첫 번째로 편집 가능한 작업에 에디터를 엽니다. 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) - Grid 레이아웃 뷰
    • onShow - (Function): void - 인라인 에디터가 열릴 때 호출
      • inlineEditors - (InlineEditorMethods) - inlineEditors 객체
      • node - (HTMLElement) - HTML 요소
      • grid - (any) - Grid 레이아웃 뷰
    • onHide - (Function): void - 인라인 에디터가 닫힐 때 호출
      • inlineEditors - (InlineEditorMethods) - inlineEditors 객체
      • node - (HTMLElement) - HTML 요소
      • grid - (any) - Grid 레이아웃 뷰
    • 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};
});

Back to top