...

트리 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. 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 : 버튼을 설정하는 영역

...

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

...

...

Style Option

1. Hide Title

...

No Padding{ON}	No Padding{OFF}
	Image RemovedImage Added

3. Show Line

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

Show Line{ON}	Show Line{OFF}
Image RemovedImage Added	Image Removed

...

Image Added

4. Show Leaf Icon

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

Show Leaf Icon{ON}	Show Leaf Icon{OFF}
Image Added	Image Added

5. Custom Tree Icon

Status
colour Yellow title new

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

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

Status
colour Green title tip

Select Tree Icon

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

...

6. Use Sub Icon (ASIS: Show Icon)

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

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

Show Icon{ON}	Show Icon{OFF}
Image Added	Image Added

7. Custom Title Style

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

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

...

8. Custom Card Style

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

...

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

...

1.

...

Draggable

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

...

Show Icon{OFF}

...

2.

...

Show Root

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

Show Root{ON}	Show Root{OFF}

...

3. Uncancel Selection

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

Click No	Uncancel Selection{ON}	Uncancel Selection{OFF}
Image Removed	Image Removed
Image Removed	Image Removed

...

1st	Image Added	Image Added
2nd	Image Added	Image Added

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

8. Enable Tree View Page

• Tree View Page

...

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

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

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

...

...

5. Label Field

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

...

...

Events Option

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

...

1. Event Buttons

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

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

• Data Select Field{No, Radio, checkbox} > How to deleteSelect Tree Data

  Status
  colour Yellow title new

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

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

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

...

Status
colour Green title TIP

Data Select Tree

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

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

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

Select “0-0-0“	Select “0-0-0-2“
Image Added	Image Added

...

Search Option

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

...

1. Search Bar

트리 상단에 트리명 검색바를 사용한다.

...

Search Bar{ON}

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

• Enable Search Bar Fields : 검색바의 검색 필터 필드 설정 (참고: https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/1691649763/Tree#5.-Label-Field )

Status
colour Green title tip

Search Bar & Label Field

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

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

...

...

...

2. Connect Search Form

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

...