테이블 시트

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

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

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

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

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

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

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

SpreadJS는 디자이너 컴포넌트와 템플릿 디자이너 테이블 시트 패널 모두에서 데이터 원본(Data Source) 열 목록에 관계를 열로 표시할 수 있도록 지원합니다. 이를 위해 UI에서는 관계 열 이름 옆에 펼치기/접기(Expand/Collapse) 버튼을 제공합니다.

펼치기/접기 버튼을 클릭하여 특정 열을 표시하거나 숨기고, 관계 열 정보를 확인할 수 있습니다. 펼칠 때 데이터 소스 열은 트리 구조로 나타납니다. 확장 및 축소 가능한 열 노드와 유연한 트리 구조 덕분에 SpreadJS 디자이너 컴포넌트에 사용자 친화적인 기능이 추가됩니다.

관계 페이지의 세부 내용을 확인하려면, 아래 GIF에 표시된 화살표 버튼을 클릭하세요.

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

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

사이드 패널에서는 상위 열 관계 노드 간의 관계를 보다 잘 표시하기 위해 트리 구조가 사용됩니다. 또한, 테이블 시트 내 열을 선택하거나 해제할 수 있도록 체크박스가 제공됩니다. 주요 관계 열을 선택하면 테이블 시트에 해당 객체 열이 추가되고, 관계 열을 선택하면 대응하는 열이 추가되며, 하위 열 이름은 "."(점)으로 계층 구조를 표시합니다.

관계 열 드래그 앤 드롭

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

사이드 패널에서 관계 노드를 드래그 앤 드롭하는 방법은 다음과 같습니다:

• 바인딩 표 필드 내에서 관계 노드를 드래그하세요.

• 관계의 하위 노드를 바깥쪽으로 드래그하여 현재 관계의 첫 번째 또는 마지막 노드로 조정할 수 있습니다.

• 같은 관계 내에서 관계 하위 노드를 드래그 앤 드롭할 수 있습니다.

• 관계 노드를 그룹(Groups) 영역으로 드래그하세요.

관찰된 바와 같이, 드래그 시 표시되는 안내 메시지(드래그 팁)는 그룹 영역에서 중복 이름을 방지하기 위해 관계의 값을 사용합니다.