# 계층 데이터
## Content
SpreadJS는 데이터 소스가 계층적임을 정의하기 위해 데이터 스키마에 hierarchy 옵션을 제공합니다.
hierarchy 옵션은 **[GC.Data.IDataSourceOption](https://developer.mescius.com/spreadjs/api/modules/GC.Data#idatasourceoption)** 인터페이스로부터 상속되며, 다음과 같은 매개변수를 제공합니다:
* **type**: 계층 유형을 정의합니다. 사용 가능한 값은 Parent, ChildrenPath, Level 또는 Custom입니다.
* **column**: 계층 데이터를 구성하는 데 사용할 키 열을 지정합니다.
* **levelOffset**: 계층 수준을 증가 또는 감소시킬 수 있는 오프셋을 나타냅니다. 일반적으로 계층 수준은 0에서 시작합니다.
* **outlineColumn**: **GC.Data.IHierarchyOutlineColumnOptions**로부터 상속되며, 계층으로 표시할 수 있는 열을 지정합니다.
* **summaryFields**: **GC.Data.IHierarchySummaryFieldCollection**로부터 상속되며, 필드에 대한 수식(공식)을 정의합니다.
* **parse**: **GC.Data.IHierarchyCustomParseOptions**로부터 상속되며, 커스텀 계층 유형의 기본 키를 부모 키로 파싱합니다.
* **unparse**: **GC.Data.IHierarchyCustomUnparseOptions**로부터 상속되며, 커스텀 계층 유형의 기본 키를 생성합니다.
## 계층 유형
계층에는 Parent, Level, ChildrenPath, Custom의 네 가지 유형이 있습니다. 각 유형은 데이터 매니저에 테이블을 추가할 때 구성할 수 있습니다:
#### Parent 계층
Parent 계층에서는 hierarchy type을 ‘Parent’로 설정하며, 기본 키는 계층 ID를 나타냅니다.
다음 코드는 테이블 시트에서 Parent 계층을 설정하는 방법을 보여줍니다:
```JavaScript
```
#### ChildrenPath 계층
ChildrenPath 계층에서는 hierarchy type을 ‘ChildrenPath’로 설정합니다. 이 경우 기본 키는 필수가 아니지만, 자식 항목에 대해 지정하는 것이 좋습니다.
다음 코드는 테이블 시트에서 ChildrenPath 계층을 설정하는 방법을 보여줍니다:
```JavaScript
```
#### Level 계층
Level 계층에서는 hierarchy type을 ‘Level’로 설정합니다. 이 경우도 기본 키는 필수가 아니지만, 지정해주는 것이 좋습니다.
다음 코드는 테이블 시트에서 Level 계층을 설정하는 방법을 보여줍니다:
```JavaScript
```
#### Custom 계층
Custom 계층에서는 hierarchy type을 ‘Custom’으로 설정합니다. 이 경우도 기본 키는 선택 사항입니다.
다음 코드는 테이블 시트에서 Custom 계층을 설정하는 방법을 보여줍니다:
```javascript
```
## 계층 작업
테이블 시트는 다음과 같은 계층 작업을 지원합니다:
* **지정한 행의 계층 수준을 승격**
테이블 시트는 **promoteHierarchyLevel(row: number)** 메서드를 사용하여 지정한 인덱스의 계층 데이터를 승격할 수 있습니다.
```JavaScript
tableSheet.promoteHierarchyLevel(8);
```
* **지정한 행의 계층 수준을 강등**
테이블 시트는 **demoteHierarchyLevel(row: number, withChildren?: boolean)** 메서드를 사용하여 지정한 행의 계층 수준을 강등할 수 있습니다.
```JavaScript
tableSheet.demoteHierarchyLevel(8);
```
* **지정한 행의 계층 데이터를 위로 이동**
테이블 시트는 **moveUp(row: number)** 메서드를 사용하여 지정한 인덱스의 계층 데이터를 위로 이동할 수 있습니다.
```JavaScript
tableSheet.moveUp(8);
```
* **지정한 행의 계층 데이터를 아래로 이동**
테이블 시트는 **moveDown(row: number)** 메서드를 사용하여 지정한 인덱스의 계층 데이터를 아래로 이동할 수 있습니다.
```JavaScript
tableSheet.moveDown(8);
```
* **선택한 행 다음에 레코드 추가**
테이블 시트는 **addHierarchyItemAfter(row: number, rowData: any)** 메서드를 사용하여 지정한 행 다음에 새 행을 추가할 수 있습니다.
```JavaScript
tableSheet.addHierarchyItemAfter(8, {id: 8, name: "grapecity"});
```
* **선택한 행 위에 레코드 추가**
테이블 시트는 **addHierarchyItemAbove(row: number, rowData: any)** 메서드를 사용하여 선택한 행 위에 레코드를 추가할 수 있습니다. 추가된 레코드는 선택한 레코드의 위치를 대체하고, 선택한 레코드는 추가된 레코드의 자식이 됩니다.
```JavaScript
tableSheet.addHierarchyItemAbove(8, {id: 8, name: "grapecity"});
```
* **선택한 행 아래에 레코드 추가**
테이블 시트는 **addHierarchyItemBelow(row: number, rowData: any)** 메서드를 사용하여 지정한 행의 자식으로 새 행 데이터를 추가할 수 있습니다. 추가된 레코드는 선택한 레코드의 마지막 자식이 됩니다.
```JavaScript
tableSheet.addHierarchyItemBelow(8, {id: 8, name: "grapecity"});
```
* **레코드 삭제**
테이블 시트 해당 레코드와 그 하위 레코드를 삭제할 수 있습니다.
* **레코드 확장**
이 메뉴 항목은 열 머리글을 클릭할 때 나타납니다. **expandAllHierarchyLevels()** 메서드를 사용하여 모든 계층 수준을 확장합니다.
```JavaScript
tableSheet.expandAllHierarchyLevels();
```
* **레코드 축소**
이 메뉴 항목은 열 머리글을 클릭할 때 나타나며, **collapseAllHierarchyLevels()** 메서드를 사용하여 모든 계층 수준을 축소합니다.
```JavaScript
tableSheet.collapseAllHierarchyLevels();
```
## **메뉴 항목 가시성 전환**
Promote, Demote, 위/아래로 이동, 전/후/상/하 위치에 추가, 계층 확장/축소 레벨 등의 메뉴 항목은 런타임 시 표시하거나 숨길 수 있습니다.
아래 스냅샷은 행 머리글을 클릭했을 때 표시되는 메뉴 항목을 보여줍니다.
아래 스냅샷은 열 머리글을 마우스 오른쪽 버튼으로 클릭했을 때 표시되는 메뉴 항목을 보여줍니다.
다음 코드 샘플은 메뉴 항목의 가시성을 전환하는 방법을 보여줍니다.
```JavaScript
// 계층형 레코드를 위한 메뉴 항목 표시
sheet.options.menuItemVisibility = {
// 아래 옵션은 행 머리글에 표시
promoteMenuItemVisible: true,
demoteMenuItemVisible: true,
// 아래 옵션은 열 머리글에 표시
expandAllLevelMenuItemVisible: true,
collapseAllLevelMenuItemVisible: true,
expandToLevelMenuItemVisible: true,
// 아래 옵션은 행 머리글에 표시되며,
// 해당 열의 dataType이 rowOrder일 경우 메뉴 항목이 활성화
moveUpMenuItemVisible: true,
moveDownMenuItemVisible: true,
addBeforeMenuItemVisible: true,
addAfterMenuItemVisible: true,
addAboveMenuItemVisible: true,
addBelowMenuItemVisible: true,
};
```
>type=warning
> **참고:** `groupBy`, 행 고정(pinning rows), `resetRow` 등의 일부 기능은 계층형 데이터와 함께 사용할 경우 정상 동작하지 않을 수 있습니다.
## **SpreadJS 디자이너 사용하기**
계층형 데이터는 SpreadJS 디자이너에서도 지원되며, Data Source 및 테이블 시트 리본의 **열(Columns) 탭**을 통해 설정할 수 있습니다. 계층 유형, 요약 수식, 아웃라인 열 이미지 등을 구성할 수 있습니다.
**계층(Hierarchy) 섹션**은 다음 옵션들을 제공합니다:
* 계층 유형(Hierarchy Type): Parent, ChildrenPath, Level 중 하나의 유형을 설정할 수 있습니다.
* **요약 수식(Summary Formula)**: 테이블의 특정 열에 대해 계층 요약 수식을 입력할 수 있습니다. 요약 수식에 대한 자세한 내용은 [수식](/spreadjs/docs/v18/features/tablesheet/hierarchy-data/formulas) 항목을 참조하시기 바랍니다.
* **개요 열(Outline Column)**: Outline Column은 아웃라인 열의 표시를 사용자 지정하는 데 사용됩니다.
또한, 테이블 시트(Table Sheet) 디자인 리본의 **메뉴 항목 표시(Menu Item Visibility) 버튼**을 통해 계층 작업 메뉴 항목의 표시 여부도 구성할 수 있습니다.
**메뉴 항목 표시(Menu Item Visibility) 버튼**을 클릭하면 **메뉴 항목 표시(Menu Item Visibility) 대화상자**가 열립니다.
