간트 시트 디자이너

SpreadJS 디자이너 컴포넌트는 워크북에 간트 시트를 삽입하는 옵션을 제공합니다.

간트 시트 버튼은 삽입(INSERT) > 시트(Sheets) 탭 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 워크북의 시트 목록에 GanttSheet1 시트가 추가되고, 간트 차트 형식(GANTT CHART FORMAT) 탭이 열립니다.

기본적으로 간트 차트 형식(GANTT CHART FORMAT) 탭이 열리면, 왼쪽에는 빈 영역이 표시되고 오른쪽에는 간트 시트(Gantt Sheet) 패널이 나타납니다.

데이터 소스를 추가하려면 간트 시트(Gantt Sheet) 패널에 있는 바인딩 표(Binding Table) 드롭다운에서 (새 표) 옵션을 선택하거나, 데이터(DATA) > 데이터 바인딩(Data Binding) 탭 그룹의 데이터 원본(DataSource) 리본 버튼을 클릭하세요.

데이터 원본(DataSource) 에서 테이블을 추가하고 CRUD 작업을 위한 외부 URL을 지정할 수 있습니다. 또한 열(Columns) 탭을 통해 테이블 데이터를 가져올 수 있습니다.

열 항목을 클릭하면 해당 열의 속성(Properties), 스키마 유형(Schema Type)을 확인하거나 수정할 수 있으며, 관계(Relationship)를 추가할 수도 있습니다. 목록 하단의 계산 열 추가(Add Calculate Column) 버튼을 클릭하여 계산 열도 추가할 수 있습니다.

디자이너 컴포넌트를 통해 데이터 원본을 가져온 후, 간트 시트(Gantt Sheet) 패널을 통해 테이블 데이터 원본을 간트 시트에 바인딩할 수 있습니다.

바인딩 표(Binding Table) 드롭다운에서는 기존 데이터 원본을 선택하거나 새로 생성할 수 있으며, 바인딩이 완료되면 간트 시트 뷰 영역에 간트 시트가 표시됩니다.

SpreadJS는 디자이너 컴포넌트와 템플릿 디자이너 간트 시트 패널 모두에서 데이터 원본 열 목록에 열 간의 관계를 표시할 수 있도록 지원합니다. 관계가 있는 열에는 연결 아이콘이 표시되며, 관계의 세부 정보를 확인하려면 화살표 버튼을 클릭하면 됩니다.

SpreadJS는 간트 시트 패널에서도 관계를 표시합니다. 필드(Fields) 섹션에는 연결된 열의 이름이 표시되며, 옆에는 확장 화살표 버튼이 함께 나타납니다. 필요한 경우 관계 열 노드를 확장하여 하위 노드를 확인할 수 있습니다.

간트 시트 패널은 트리 형태의 구조를 통해 상위-하위 노드 간의 관계를 보다 명확하게 표시합니다.

또한, 간트 시트에서 열을 표시하거나 숨길 수 있도록 체크/체크 해제 버튼도 제공됩니다. 주 관계 열을 선택하면 해당 객체를 나타내는 열이 간트 시트에 추가되며, 하위 관계 열을 선택하면 해당 열이 삽입되고, 하위 열 이름은 "taskId.id"와 같이 "." 기호를 사용해 계층 구조를 나타냅니다.

SpreadJS 디자이너 컴포넌트는 간트 시트의 열 설정을 수정할 수 있는 기능도 제공합니다. 기본 설정을 변경하려면 간트 시트에서 열을 선택하세요. 그러면 열 설정(COLUMN SETTING) 탭이 열리며, 여기에서 캡션, 값, 열 이름, 데이터 유형, 스타일 등 다양한 매개변수를 필요에 따라 조정할 수 있습니다.

또한, 간트 시트(GanttSheet)는 다양한 작업(task) 관련 기능 수행, 데이터 정보 확인, 차트 형식 변경 등의 기능을 제공합니다. 자세한 내용은 아래의 주제를 참고하세요.