테이블 시트

SpreadJS 디자이너 컴포넌트는 워크북에 테이블 시트를 추가하는 기능을 제공합니다.

테이블 시트 리본 버튼은 삽입 탭의 시트 그룹에서 찾을 수 있습니다. 이 버튼을 클릭하면 열린 워크북에 TableSheet1 탭이 추가되고, 테이블 시트 디자인 탭이 활성화됩니다.

데이터 탭의 데이터 바인딩(Data Binding) 그룹에 있는 데이터 원본(DataSource) 리본 버튼을 클릭하여 데이터 소스를 생성할 수 있습니다. 데이터 원본(DataSource) 탭이 나타나면, 여기서 테이블을 추가하고 CRUD(생성, 읽기, 수정, 삭제) 기능을 위한 원격 URL을 설정할 수 있습니다. 또한, 열(Columns) 탭을 통해 테이블 데이터를 가져올 수도 있습니다.

열(Column) 항목을 클릭하면 해당 열의 속성(Properties)과 스키마 유형(Schema Type)을 설정하거나 관계(Relationship)를 추가할 수 있습니다. 목록 맨 끝에 있는 ‘계산 열 추가(Add Calculate Column)’를 클릭하여 계산된 열도 추가할 수 있습니다.

디자이너 컴포넌트에서 데이터 소스를 추가한 후, 사용자는 디자이너 컴포넌트 테이블 시트 패널을 통해 테이블 시트에 데이터 소스를 바인딩할 수 있습니다. 바인딩 표(Binding Table) 드롭다운에서 기존 테이블 데이터 소스를 선택하거나 새 테이블 데이터 소스를 생성하세요. 그러면 이전에 비어 있던 영역에 테이블 시트 뷰가 로드됩니다.

테이블 시트의 필드 영역과 그룹 영역은 런타임 환경과 동일하게 작동합니다. 자세한 내용은 테이블 시트 컴포넌트를 참조하세요.

데이터 원본 열에서 관계 표시하기

SpreadJS는 디자이너 컴포넌트와 템플릿 디자이너 테이블 시트 패널 모두에서 데이터 원본(Data Source) 열 목록에 관계를 열로 표시할 수 있도록 지원합니다.

데이터 소스를 생성하려면 DATA > Data Binding 탭 그룹에서 DataSource 리본 버튼을 클릭하세요. 그러면 DataSource 탭이 표시되며, 여기서 테이블을 추가하고 원격 URL을 설정하여 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 사용할 수 있습니다. 또한 Columns 탭을 통해 테이블 데이터를 가져올 수도 있습니다.

열 항목을 클릭하면 해당 열의 속성, 스키마 유형을 확인하거나 수정할 수 있으며, 관계를 추가할 수도 있습니다. 또한 목록 끝의 Add Calculate Column을 클릭하여 계산 열을 추가할 수 있습니다.

디자이너 컴포넌트에서 데이터 소스를 추가한 후, 사용자는 디자이너 테이블 시트 패널을 통해 테이블 데이터 소스를 테이블 시트에 바인딩할 수 있습니다. Binding Table 드롭다운에서 기존 테이블 데이터 소스를 선택하거나 새 테이블 데이터 소스를 생성하면, 이전에 비어 있던 영역에 TableSheet 뷰가 로드됩니다.

테이블 시트의 필드 영역(field area)과 그룹 영역(group area)은 런타임 환경과 동일하게 작동합니다. 자세한 내용은 테이블 시트 구성요소를 참조하세요.

디자이너 패널에서 관계 표시하기

SpreadJS는 테이블 시트 디자이너 사이드 패널에서 관계(Relationship)를 표시합니다. UI 공간을 절약하기 위해 사이드 패널에는 관계 열의 이름과 확장/축소 버튼만 표시됩니다. 필요할 때 관계 열 노드를 확장하거나 축소하여 하위 노드를 쉽게 확인할 수 있습니다.

사이드 패널에서는 부모 열 관계 노드 간의 관계를 트리 구조로 보여줍니다. 또한 테이블 시트에서 열을 선택하거나 해제할 수 있는 체크박스가 제공됩니다.

• 메인 관계 열을 선택하면 테이블 시트에 객체 형태의 열이 추가됩니다.

• 하위 관계 열을 선택하면 해당 열이 추가되며, 하위 열 이름은 "."를 사용해 계층 구조를 나타냅니다.

관계 열 Drag & Drop

사용자는 테이블 시트 디자이너 사이드 패널의 Binding Table 필드 및 그룹 영역에서 관계 노드를 드래그 앤 드롭할 수 있습니다.

사이드 패널에서 관계 노드를 드래그하는 방법:

• Binding Table 필드 내에서 이동

• Groups 영역으로 이동

관찰되는 바와 같이, 드래그 시 표시되는 힌트는 관계의 값을 사용하여 그룹 영역에서 이름 중복을 방지합니다.