트리 그리드 잘 사용하고 잘 활용하는 방법 - 트리 그리드 셀 컨트롤 가이드

Intro.

트리 구조(tree 構造, 문화어: 나무구조)란 그래프의 일종으로, 여러 노드가 한 노드를 가리킬 수 없는 구조이다. 간단하게는 회로가 없고, 서로 다른 두 노드를 잇는 길이 하나뿐인 그래프를 트리라고 부른다. 

트리 구조 이미지 예시

넥사크로플랫폼은 데이터를 테이블 구조 즉, 리스트 형태로 담을 수 있는 그리드 컴포넌트를 제공합니다. 그리드를 구성하는 오브젝트 중 셀은 다양한 형태의 컴포넌트를 표현 할 수 있으며, 이 중, Treeitemcontrol은 각 레벨을 설정하여 데이터를 트리로 구성합니다.

그리드 cell type별 컴포넌트 예시

 

What will help?

트리는 기본적으로 접기/펼치기 가능한 아이템과 체크박스 옵션을 사용할 수 있습니다. 또한 트리 정보 값을 반환 받거나 상태관리를 설정 할 수 있는 메소드를 기본 제공합니다.

Type	Method명	설명
설정	setTreeStatus	특정 Row의 트리 상태 설정 (Expand, Collapse)
값 반환 (Number or String)	getTreeChildCount	자식 Row 수 반환
	getTreeChildRow	자식 Row에 해당하는 Dataset Row 값 반환
	getTreeParentRow	부모 Row에 해당하는 Dataset Row 값 반환
	getTreePath	뿌리(Root)에서 특정 Row까지 각 Row의 text 속성값 반환
	getTreeRow	DataSet의 Row 값에 해당하는 Grid 의 Row 값 반환
	getTreeSiblingRow	형제(Sibling) Row에 해당하는 DataSet Row 값 반환
	getTreeStatus	Row의 트리 상태 반환
Boolean 반환	isTreeCollapsedRow	Row가 collapse 상태인지 반환
	isTreeExpandedRow	Row가 Expand 상태인지 반환
	isTreeLeafRow	Row가 단말(Leaf) Row 인지 반환
	isTreeRootRow	Row가 뿌리(Root) Row 인지 반환

표 - Grid 가 트리 형식일 때 사용 가능한 method

 

How to Grid tree?

기본 제공되는 메소드를 사용하여 트리를 동적으로 컨트롤 할 수 있습니다. 3가지 예제를 통하여 사용 방법을 살펴보겠습니다.

1.그리드 Row의 하위 노드 모두 열기/닫기

트리의 Expand/Collapse를 조정할 수 있는 기본 지원 방법은 2가지입니다. 트리 그리드의 treeitembutton을 마우스로 클릭하여 사용하는 방법과 키보드의 좌/우 방향키로 사용하는 방법입니다. 키보드 방향키의 경우 CellTreeItem의 treeuseexpandkey 속성으로 동작유무를 결정합니다. (왼쪽 방향키 Collapse, 오른쪽 방향키 Expand)

이 외 다른 방식으로 트리를 Expand/Collapse 조정 할 경우 setTreeStatus 메소드를 통하여 구현 할 수 있습니다. 아래 화면은 그리드의 셀을 더블 클릭 하였을 때 현재 Row의 트리 상태를 변경한 예제입니다.

트리 펼치기/닫기

코드 순서

#1. 그리드의 oncelldbclick 이벤트를 생성하여 현재 Row의 트리 상태 값을 확인합니다.

트리 상태 값을 확인하는 getTreeStatus 메소드 사용 시 0의 값은 isTreeCollapsedRow 메소드와 같고 1의 경우isTreeExpandedRow 메소드와 같은 상태 값을 의미합니다.

#2. 값을 반전 하여 트리 상태를 설정합니다.

setTreeStatus 메소드의 bTreeStatus를 ‘true’로 설정할 경우 Expand 상태, ‘false’로 설정할 경우 Collapse 상태로 반영됩니다.

2. 현재 Row의 Root와 Leaf 위치 찾아서 이동하기

트리의 Root는 부모가 없는 최상위 노드입니다. nexacro platform의 트리의 경우 cell control property의treestartlevel에 따라 최상위 노드의 레벨이 지정됩니다. (기본 속성 값 ‘0’)

Leaf란 자식이 없는 즉, 아래 또 다른 노드가 연결되지 않은 단말노드입니다. 이와 반대로 Root를 포함한 하위를 갖는 노드는 내부노드가 됩니다.

nexacro platform에서는 Root와 Leaf를 boolean 값으로 체크하는 isTreeRootRow/ isTreeLeafRow 메소드를 제공합니다. 각 노드에 해당하는 Row로 이동하기 위하여서는 추가적으로 구현이 필요합니다.

다음은 현재 선택된 Row에서 Root와 Left 노드를 찾는 방법입니다.

Root, Leaf node 찾아 이동하기

코드 순서

#1. Root 노드 찾기

1-1) 현재 선택 된 Row가 몇 번째 내부 노드에 속하여 있는지 알 수 없으므로 while문을 사용하였습니다.

1-2) while문은 isTreeRootRow 메소드를 사용하여 Row가 뿌리노드 일 경우 종료됩니다.

1-3) Row가 뿌리노드가 아닐 경우, getTreeParentRow 메소드를 사용하여 부모노드를 찾습니다.

1-4) 만약 부모노드에 0이하의 값인 -1이 반환되었을 경우 해당 트리 treestartlevel값과 실제 반영된 root level 값이 일치 하지 않기 때문에 제일 상단의 Row로 지정 후, 종료합니다.

#2. Leaf 노드 찾기

2-1) 현재 선택 된 Row가 몇 번째 내부 노드에 속하여 있는지 알 수 없으므로 while문을 사용하였습니다.

2-2) while문은 isTreeLeafRow 메소드를 사용하여 Row가 단말노드 일 경우 종료됩니다.

2-3) Row가 단말노드가 아닐 경우, getTreeChildRow 메소드를 사용하여 자식노드를 찾습니다.

        이때 nChildIndex를 -1로 설정할 경우 자식노드 중 가장 마지막 Row를 반환합니다.

 

3. 동일한 레벨들에서만 트리 컨트롤 하기

트리는 설정된 treelevel 값에 따라 구조가 표현됩니다. 그 중 Root에 속하는 Level이 같은 값 일 경우 형제가 성립이 됩니다. getTreeSiblingRow는 특정 Row를 기준으로 형제(Sibling) Row 값을 반환하는 메소드입니다. 떨어진 위치를 선택적으로 설정하여 찾을 위치에 해당하는 방향 및 떨어진 정도를 지정할 수 있습니다.

Sibling node 찾아 이동하기

 

코드 순서

#1. up/down 2개의 버튼을 추가하여 동일 레벨의 노드를 기준으로 위 아래로 이동 할 수 있도록 추가하였습니다.

#2. getTreeSiblingRow 메소드를 통하여 형제노드에 해당하는 Row를 찾습니다.

#3. Up의 경우 Row의 위쪽에 해당하는 노드를 찾기 위하여 음수값인 -1값으로 떨어진 위치를 설정하고, Down 버튼의          경우 아랫쪽에 해당하는 노드를 찾기 위하여 양수값인 1으로 떨어진 위치를 설정하여 찾습니다.

#4. 만약 현재 찾는 Sibling(형제) 가 더 이상 존재 하지 않을 경우 -1값으로 반환되므로 이때에는 현재 Row에서 더 이상        움직이지 않도록 현재 값으로 설정합니다.

 

4. 추가 응용 샘플

Grid Tree의 메소드를 사용하여 Drag&Drop으로 트리를 움직이는 샘플 및 트리구조에서의 검색 및 이동에 관한 샘플은 추가적으로 techtip을 통하여 확인 할 수 있습니다. 하단의 참고 URL을 통하여 확인할 수 있습니다.

☞ drag&drop으로 메뉴 이동 샘플 바로가기

☞ 트리구조 검색 및 이동 샘플 바로가기

 

참고 자료

위키백과 - 트리 구조 바로가기

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro