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 할 경우 발생하는 이벤트를 설정하는 영역

Option Detail

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

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

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

Events : 버튼을 설정하는 영역

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. Draggable

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

Draggable{ON}

2. Show Root

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

Show Root{ON}	Show Root{OFF}

3. Uncancel Selection

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

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