간트 시트 디자이너

SpreadJS 디자이너 컴포넌트에서는 워크북에 간트 시트를 삽입하고 구성할 수 있습니다.

간트 시트는 테이블에 바인딩되며, 필드 매핑 및 초기화 규칙을 통해 테이블 스키마를 간트 데이터 모델에 맞춥니다.

간트 시트 삽입

삽입 > 시트 탭 그룹에서 간트 시트 버튼을 사용할 수 있습니다.

간트 시트를 클릭하면:

• 새 간트 시트(예: GanttSheet1)가 워크북에 추가됩니다.

• 간트 차트 서식 탭이 열립니다.

• 간트 시트 보기 영역(왼쪽)과 간트 시트 패널(오른쪽)이 표시됩니다.

데이터 바인딩 및 초기화

간트 시트는 DataSource에 정의된 테이블에 바인딩되어야 합니다.

테이블을 바인딩하려면:

1. 간트 시트 패널에서 바인딩 테이블 드롭다운을 엽니다.

2. 기존 테이블을 선택하거나 (새 테이블)을 선택하여 새 테이블을 생성합니다.

테이블은 데이터 > 데이터 바인딩 > DataSource에서 정의하고 관리할 수 있으며, 다음 작업을 수행할 수 있습니다.

• 스키마 형식 정의

• 관계 구성

• 외부 CRUD URL 구성

• 계산 열 추가

테이블을 선택하면 간트 시트가 내부 데이터 모델을 초기화하고 필드 매핑을 자동으로 확인합니다.

기본 작업 모드

선택한 테이블에 작업 모드 필드가 없는 경우 기본 작업 모드를 선택하라는 대화 상자가 표시됩니다.

• 자동 – 일정 예약 모드.

  작업 시작일과 종료일은 종속성, 제약 조건 및 일정 예약 규칙에 따라 일정 예약 엔진에서 계산될 수 있습니다.

• 수동 – 타임라인 모드.

  작업 표시줄은 일정 재계산 없이 매핑된 시작 및 종료 필드에서 직접 렌더링됩니다.

아래는 defaultMode를 자동과 수동으로 설정했을 때 Table2에 대한 간트 시트 초기화 결과를 보여줍니다.

• 자동

• 수동

이 설정은 간트 시트가 처음 테이블에 바인딩될 때 작업이 초기화되는 방식을 결정합니다.

필드 매핑

필드 매핑은 테이블 스키마를 간트 데이터 모델에 맞추는 방법을 정의합니다.

간트 시트에는 작업 식별 정보 및 표시 이름과 같은 특정 논리 필드가 필요합니다. 이러한 논리 필드는 선택한 테이블의 실제 열에 매핑되어야 합니다.

간트 시트 패널에는 다음 항목이 포함됩니다.

• 필드 목록 – 바인딩된 테이블에서 사용할 수 있는 모든 필드입니다.

• 필드를 매핑 영역으로 드래그 – 매핑이 필요한 간트별 논리 필드입니다.

필수 필드

다음 필드는 필수입니다.

• 작업 번호

• 작업 이름

필수 필드에는 (*)가 표시됩니다.

자동 매핑 동작

테이블이 처음 바인딩되면 SpreadJS가 자동으로 매핑을 제안합니다.

자동 매핑은 다음을 기준으로 수행됩니다.

• 정확한 필드 이름 일치

• 명명 규칙

• 호환되는 데이터 형식

정확한 필드 이름 일치

테이블 필드 이름이 필수 간트 필드 이름과 정확하게 일치하면 정확한 일치로 처리됩니다.

정확하게 일치하는 필드는:

• 잠깁니다.

• 제거할 수 없습니다.

• 다시 매핑할 수 없습니다.

• 제거 버튼이 비활성화됩니다.

이를 통해 테이블이 이미 예상되는 간트 모델을 따르는 경우 스키마의 안정성을 유지할 수 있습니다.

지능형 추론

명명 패턴 또는 데이터 형식 호환성을 기반으로 필드가 추론된 경우:

• 매핑을 제거할 수 있습니다.

• 드래그 앤 드롭을 통해 매핑을 변경할 수 있습니다.

드래그 앤 드롭 매핑

드래그 앤 드롭을 사용하여 매핑을 구성하거나 수정할 수 있습니다.

• 필드 목록에서 논리 간트 필드로 필드를 드래그합니다.

• 매핑된 필드를 다른 논리 필드로 드래그하여 다시 매핑합니다.

• 제거를 클릭하여 매핑을 지웁니다.

• 매핑된 필드를 패널 밖으로 드래그하여 제거합니다.

매핑 영역 내에서 다시 매핑하면:

• 대상 필드가 업데이트됩니다.

• 원본 필드가 지워집니다.

캡션 할당

자동으로 추론되거나 수동으로 매핑된 필드의 경우:

매핑된 테이블 필드에 DataSource의 캡션이 정의되어 있지 않으면 간트 시트는 논리 간트 필드 이름을 기반으로 기본 캡션을 할당합니다(예: birthDate를 Start에 매핑하면 캡션이 Start로 설정됨).

작업 구조 구성

작업 구조는 작업이 구성되는 방식과 종속성이 해석되는 방식을 정의합니다.

계층 구조 설정

계층 구조는 작업이 부모-자식 트리 구조로 표시되는 방식을 결정합니다.

계층 구조를 구성하려면:

1. 작업 이름 매핑 필드에서 설정 버튼을 클릭합니다.

   
   

2. 대화 상자에서 부모-자식 관계를 정의합니다.

   
   

구성 후:

• 작업 이름이 트리 형태로 렌더링됩니다.

• 간트 차트에 계층 구조가 반영됩니다.

선행 작업 자동 추론

다음과 같은 경우:

• 필드가 선행 작업에 매핑되거나

• 계층 구조가 구성되면

SpreadJS가 작업의 선행 작업 관계를 자동으로 추론합니다.

생성된 선행 작업 데이터는 기본 데이터 원본에서 매핑된 선행 작업 필드에 다시 기록됩니다.

필드 목록의 관계

테이블에 정의된 관계가 있는 경우:

• 관련 열은 필드 목록에 연결 아이콘으로 표시됩니다.

• 관계 노드를 확장하여 하위 필드를 볼 수 있습니다.

관계 열을 삽입할 때 계층적 명명 방식이 점 표기법을 사용하여 반영될 수 있습니다(예: myTable1_Id.id).

열 설정 수정

열 설정을 수정하려면:

1. 간트 시트 보기에서 열을 선택합니다.

2. 열 설정 탭이 열립니다.

3. 다음과 같은 속성을 조정합니다.

   • 캡션

   • 값

   • 열 이름

   • 데이터 형식

   • 스타일

이러한 설정은 표시 방식에 영향을 주지만 기본 필드 매핑 모델은 변경하지 않습니다.

추가 간트 시트 탭

간트 시트는 리본 탭을 통해 추가 기능을 제공합니다.