...
트리 컴포넌트를 추가하면 다음과 같은 기본 셋팅 화면이 출력된다. 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은 기본 셋팅 옵션이다. 옵션 영역에서 테이블명을 노출/비노출로 설정 할 수 있다.
...
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
...
1. Drag Sort (ASIS: Draggable)
트리에서 사용 가능한 React-DND(Drag And Drop) 정렬 기능을 제공한다. 드래그 핸들러도 함께 사용 가능하다.
Use Drag handler Field
: 드래그 핸들러 아이콘 필드 사용 여부 추가 설정Status colour Yellow title NEW
Drag handler
Status
colour Green title TIP 테이블 첫번째 열에 드래그 핸들러 아이콘을 노출하여 사용자가 드래그 정렬 기능을 사용 할 수 있음을 쉽게 인지하도록 한다.
Drag sorting with handler
Status
colour Purple title ANT
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
우클릭 메뉴 출력 옵션
...
트리 상단에 트리명 검색바를 사용한다. 검색시 해당 키워드가 걸린 트리를 모두 Open한다Open 한다.
...
| Info |
|---|
Search Bar{ON} |
...
→ Search “Root |
...
1“ |
...
2. Connect Search Form
SearchForm 컴포넌트를 연동하여 출력하는 기능이다.
...