Setup

Create New

트리 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. 트리의 NodeType, 트리 타이틀 입력, Data Sync와 API 사용여부를 설정 할 수 있다.

Open

Set NodeType

NodeType을 선택하면 다음과 같이 2가지 트리 셋팅 영역이 출력된다.

• Tree Options Set Area : 트리 옵션을 Style, function, Events, Search 4가지 탭으로 제공

• Tree Click Set Area : 트리 항목을 Click 할 경우 발생하는 이벤트를 설정하는 영역

Open

Option Detail

트리 옵션 설정 영역의 Tab 메뉴별 상세 내용은 다음과 같이 4가지로 나뉜다.

• Style : 기본으로 셋팅된 트리의 스타일 변경 또는 커스터마이징 스타일 등을 설정하는 영역

• function : 트리 드래그 기능, 우클릭 메뉴, Root 또는 필드 정보 출력 등의 추가 기능 설정 영역

• Events : 버튼을 설정하는 영역

• Search : 검색바, Search Form 컴포넌트 연결 기능 설정 영역

Style Option

1. Hide Title

컴포넌트 Title은 기본 셋팅 옵션이다. 옵션 영역에서 테이블명을 노출/비노출로 설정 할 수 있다.

2. No Padding

트리 컴포넌트의 패딩 영역 사용 여부를 ON/OFF로 설정 할 수 있다.

3. Show Line

동일 레벨 트리 사이에 라인 표시 여부를 설정 한다.

4. Show Leaf Icon

Show Line{ON}으로 설정 할 경우, 트리의 마지막 level에 아이콘 출력 여부를 선택 할 수 있다.

5. Custom Tree Icon new

트리의 기본 아이콘을 커스터마이징으로 변경 할 수 있다. https://ant.design/components/tree/#components-tree-demo-switcher-icon

• Select Tree Icon : 아이콘 목록에서 트리 아이콘 선택

tip Select Tree Icon

아이콘 선택은 1개만 진행하며, 선택된 아이콘이 Collapse/Expand 상황에 맞추어 회전된다.

6. Use Sub Icon (ASIS: Show Icon)

트리의 기본 아이콘 뒤에 특정 아이콘을 추가로 출력할 수 있다.

• Select Sub Icon: 아이콘 목록에서 서브 아이콘 선택

7. Custom Title Style

테이블 타이틀 스타일을 설정하는 기능이다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

8. Custom Card Style

리스트 형태의 테이블을 카드 스타일로 변경 할 수 있다. 스타일 설정은 3가지 타입으로 선택하여 진행할 수 있다.

(참고: Table List | Style Set Detail)

Function Option

Function Tab의 상세 옵션 내용은 다음과 같다.

1. Draggable

트리에서 사용 가능한 React-DND(Drag And Drop) 정렬 기능을 제공한다.

2. Show Root

트리 Root 표시 여부를 설정 할 수 있다.

3. Uncancel Selection

클릭하여 선택한 트리 항목을 다시 클릭 하였을 때에도 Selected 상태가 유지되는 기능이다.

4. Context Menu

우클릭 메뉴 기능으로 Create, Update, View 3가지 메뉴 옵션을 기본으로 제공한다.

• Enable Tree Create Page : 신규 생성 메뉴 옵션 사용 여부 설정{ON/OFF}

  • Tree Create Page : 트리에 연결할 신규 생성 페이지 선택

• Enable Tree Update Page : 선택 수정 메뉴 옵션 사용 여부 설정{ON/OFF}

  • Tree Update Page : 트리에 연결할 수정 페이지 선택

• Enable Tree View Page : 트리 상세 보기 메뉴 옵션 사용 여부 설정{ON/OFF}

  • Tree View Page : 트리에 연결할 상세 보기 페이지 선택

5. Label Field

Default 출력 필드는 Name이며, Label Field 옵션을 사용하여 더 많은 필드 라벨을 선택하여 출력 할 수 있다.

Events Option

Events Tab의 상세 옵션 내용은 다음과 같다.

1. Event Buttons

이벤트 버튼 목록과 함께 트리 데이터 선택 타입, 버튼의 위치와 정렬 설정 옵션이 출력된다.

• Enable Form Event Buttons : 이벤트 버튼 목록(Create, Read, Update, Delete, List)

• Select Tree Data new : 체크박스 형태의 트리 데이터 선택 기능 사용 설정(No Use, Checkbox)

• Event Buttons Position : 버튼 위치 선택(Top, Bottom, Both)

  • Top/Bottom Event Buttons Align : 버튼 정렬 선택(Left, Center, Right)

TIP Data Select Tree

Checkbox를 선택하면, 트리 항목 Text 앞머리에 체크박스가 출력된다. 이 옵션은 보편적으로 트리 데이터를 선택하여 진행 할 수 있는 Event Buttons(수정/삭제)을 사용할 경우 함께 설정한다.

- No Use : 트리 항목을 선택해야 하는 이벤트 버튼을 사용하지 않는 경우 사용

- Checkbox : 하나씩 선택 가능, 상위 트리 항목을 선택 할 경우 연관된 하위 트리 항목은 모두 자동 선택

Search Option

Search Tab의 상세 옵션 내용은 아래와 같다.

1. Search Bar

검색바 옵션을 {ON}으로 설정하면, 검색바 필드 목록이 하단에 출력된다. 값을 선택하면 트리 상단에 검색바가 추가된다. 실제 검색 결과는 검색 키워드를 가지고 있는 모든 트리 항목이 Open 되는 것으로 나타난다.

• Enable Search Bar Fields : 검색바의 검색 필터 필드 설정 (참고: Tree | 5. Label Field )

tip Search Bar & Label Field

Label Field{ON}에서 설정한 필드 목록이 Enable Search Bar Fields 목록에 출력

> 출력된 필드 내에서 검색 필터 필드 선택 가능

2. Connect Search Form

SearchForm 컴포넌트를 연동하여 출력하는 기능이다.