트리 화면 (Tree)
한눈에 보기
트리 화면은 계층 구조 데이터를 트리(나무) 형태로 시각화하는 화면입니다. 조직도, BOM(자재명세서), 품목 분류, 창고 구역 등 부모-자식 관계가 있는 데이터에 적합합니다.
소개
계층형 데이터를 목록이나 양식으로만 보면 구조를 파악하기 어렵습니다. 트리 화면을 사용하면 부모-자식 관계가 시각적으로 표현되어, 전체 구조를 직관적으로 이해할 수 있습니다.
트리 화면은 계층형 테이블과 함께 사용합니다.
이렇게 보입니다
트리 화면의 전체 모습입니다. 접기/펼치기 화살표를 클릭하여 하위 항목을 열고 닫을 수 있습니다.
BOM 구조
▼ 완제품 A (PROD-001)
▼ 반제품 B (SEMI-001)
├─ 볼트 M8 (MAT-001) 수량: 10
├─ 너트 M8 (MAT-002) 수량: 10
└─ 와셔 M8 (MAT-003) 수량: 10
▶ 반제품 C (SEMI-002) [접혀있음]
├─ 스프링 (MAT-004) 수량: 4
└─ 핀 (MAT-005) 수량: 8
▶ 완제품 D (PROD-002) [접혀있음]
+ 루트 항목 추가
전체 펼치기
전체 접기
주요 기능
| 기능 | 설명 |
|---|---|
| 접기/펼치기 | 화살표 클릭으로 하위 항목 표시/숨김 |
| 검색 | 트리 전체에서 항목 이름 검색 |
| 드래그 이동 | 항목을 드래그하여 다른 부모 아래로 이동 |
| 항목 추가 | 선택한 항목의 하위에 새 항목 추가 |
| 전체 펼치기/접기 | 트리 전체를 한꺼번에 펼치거나 접기 |
| 노드 클릭 | 항목 클릭 시 상세 정보 표시 또는 편집 |
설정 방법
- 계층형 테이블을 미리 생성합니다 (계층형 옵션 활성화)
- 화면 노드를 배치하고 계층형 테이블에 연결합니다
- 화면 타입을 "트리(Tree)" 로 선택합니다
- 표시 컬럼(트리에서 보여줄 이름)을 설정합니다
| 설정 | 설명 |
|---|---|
| 표시 컬럼 | 트리 노드에 표시할 텍스트 (예: 품목명) |
| 아이콘 | 레벨이나 타입별 아이콘 설정 |
| 부가 정보 | 노드 옆에 추가로 표시할 값 (예: 수량) |
| 드래그 허용 | 드래그로 항목 이동 허용 여부 |
| 클릭 동작 | 노드 클릭 시 동작 (상세 보기/편집) |
실무 예시
| 업무 | 트리 구조 | 표시 컬럼 |
|---|---|---|
| 조직도 | 회사 → 사업부 → 부서 → 팀 | 부서명 |
| BOM | 완제품 → 반제품 → 원자재 | 품목명 + 소요량 |
| 품목 분류 | 대분류 → 중분류 → 소분류 | 분류명 |
| 창고 구역 | 창고 → 구역 → 랙 → 셀 | 구역코드 |
| 메뉴 관리 | 대메뉴 → 중메뉴 → 소메뉴 | 메뉴명 |
팁
트리 화면은 마스터-디테일 화면의 마스터 영역에 배치하면 더욱 유용합니다. 왼쪽에 트리로 카테고리를 선택하고, 오른쪽에 해당 카테고리의 품목 목록을 표시할 수 있습니다.
자주 묻는 질문
Q: 트리 깊이에 제한이 있나요? A: 기술적 제한은 없지만, 5~6단계 이내를 권장합니다.
Q: 드래그로 항목을 이동하면 데이터도 바뀌나요? A: 네, 드래그 편집이 활성화되어 있으면 해당 항목의 부모(parent_id)가 변경됩니다.
Q: 같은 레벨의 항목 순서를 바꿀 수 있나요? A: 네, 같은 부모 아래에서 드래그하여 순서를 변경할 수 있습니다.