Setup

Create New

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

Set NodeType

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

Tree Options Set Area : 트리 옵션을 Style, function, Events, Search 4가지 탭으로 제공
Tree Click Set Area : 트리 항목을 Click 할 경우 발생하는 이벤트를 설정하는 영역

Style Option

1. Hide Title

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

Hide Title{OFF}

2. No Padding

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

No Padding{ON}	No Padding{OFF}

3. Show Line

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

Show Line{ON}	Show Line{OFF}

4. Show Icon

각각의 트리 Text 앞부분에 선택한 아이콘이 추가로 출력된다.

Select Icon: 기본 제공하는 아이콘 목록

Show Icon{ON}	Show Icon{OFF}

5. Show Leaf Icon

트리의 마지막 level에 아이콘 출력 여부를 선택 할 수 있다.

Select Leaf Icon: 기본 제공하는 Leaf 아이콘 목록

Show Leaf Icon{ON}	Show Leaf Icon{OFF}

6. Custom Title Style

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

(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)

7. Custom Card Style

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

(참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail)

Function Option

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

1. Drag Sort (ASIS: Draggable)

트리에서 사용 가능한 React-DND(Drag And Drop) 정렬 기능을 제공한다. 드래그 핸들러도 함께 사용 가능하다.

Use Drag handler Field NEW : 드래그 핸들러 아이콘 필드 사용 여부 추가 설정

TIP Drag handler
테이블 첫번째 열에 드래그 핸들러 아이콘을 노출하여 사용자가 드래그 정렬 기능을 사용 할 수 있음을 쉽게 인지하도록 한다. ANT Drag sorting with handler

2. Show Root

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

Show Root{ON}	Show Root{OFF}

3. Uncancel Selection

Click No	Uncancel Selection{ON}	Uncancel Selection{OFF}
1
2

4. Context Menu

우클릭 메뉴 출력 옵션

Enable Tree Create Page
- Tree Create Page
Enable Tree Update Page
- Tree Update Page
Enable Tree View Page
- Tree View Page

5. Lable Field

트리에 출력 할 필드 라벨 다중 선택 가능

Events Option

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

Event Buttons

Enable Form Event Buttons
Data Select Field{No, Radio, checkbox}
Event Buttons Position
- Top/Bottom Event Buttons Align

Search Option

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

1. Search Bar

트리 상단에 트리명 검색바를 사용한다. 검색시 해당 키워드가 걸린 트리를 모두 Open 한다.

Search Bar{ON} → Search “Root 1“

2. Connect Search Form

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

Tree