Page Comparison

...

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

...

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

...

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

...

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

...

...

Style Option

1. Hide Title

...

Show Line{ON}	Show Line{OFF}

4. Show

...

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

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

...

Leaf Icon

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

Show Leaf Icon{ON}	Show Leaf Icon{OFF}
Image RemovedImage Added	Image RemovedImage 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 Leaf Sub Icon: 기본 제공하는 Leaf 아이콘 목록아이콘 목록에서 서브 아이콘 선택

Show Leaf Icon{ON}	Show Leaf Icon{OFF}
Image RemovedImage Added	Image RemovedImage 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) 정렬 기능을 제공한다.

...

3. Uncancel Selection

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

Click No	Uncancel Selection{ON}	Uncancel Selection{OFF}
11st	Image RemovedImage Added	Image RemovedImage Added
22nd	Image RemovedImage Added	Image RemovedImage 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 : 트리에 연결할 수정 페이지 선택

• 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)

• Data Select Field{No, Radio, checkbox} Select 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

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

...

검색바 옵션을 {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 목록에 출력

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

...