트리뷰 노드 조작하기
RealGrid의 트리뷰(TreeView)는 트리 노드를 조작하기 위해 다양한 API를 제공하고 있습니다. 접기, 펼치기는 물론, RowId를 이용해 부모 자식간 노드를 이동하거나 자식 노드의 개수를 알 수 있는 함수도 있습니다.
(Only JS Support)
TreeView
에는 트리 노드를 접고 펼치기 위한 함수들이 있습니다.
1
2
3
4
5
//모두 펼치기
treeView.expandAll();
//모두 접기
treeView.collapseAll();
선택된 노드에 대한 접기, 펼치기 기능을 실행해 보세요.
1
2
3
4
5
6
7
8
9
var current = treeView.getCurrent();
var recursive = document.getElementById("checkRecursive").checked;
var force = document.getElementById("checkForce").checked;
//선택 노드 펼치기
treeView.expand(current.itemIndex, recursive, force);
//선택 노드 접기
treeView.collapse(current.itemIndex, recursive);
TreeDataProvider
에는 특정 노드에서 자식노드의 개수를 확인할 수 있는 함수들 입니다.
1
2
3
4
5
6
7
var current = treeView.getCurrent();
//자식 노드 개수 가져오기
var childCount = treeDataProvider.getChildCount(current.dataRow);
//자식 및 모든 자손 노드의 개수 가져오기
var childCount = treeDataProvider.getDescendantCount(current.dataRow);
선택한 노드의 자손 또는 조상 노드의 RowId를 배열로 가져올 수 있습니다.
자손 노드 RowId 가져오기 조상 노드 RowId 가져오기
1
2
3
4
5
6
7
var current = treeView.getCurrent();
//자손 노드 RowId 가져오기
var descendants = treeDataProvider.getDescendants(current.dataRow);
//조상 노드 RowId 가져오기
var ancestors = treeDataProvider.getAncestors(current.dataRow);
동일한 형제들 사이에서 특정 노드를 위/아래로 움직일 수 있습니다.
노드를 한 줄 위로 이동하기 노드를 한 줄 아래로 이동하기
1
2
3
4
5
6
7
8
9
var current = treeView.getCurrent();
//노드를 한 줄 위로 이동하기
treeDataProvider.moveRowSibling(current.dataRow, -1);
treeView.setCurrent({dataRow: current.dataRow});
//노드를 한 줄 아래로 이동하기
treeDataProvider.moveRowSibling(current.dataRow, +1);
treeView.setCurrent({dataRow: current.dataRow});
왼쪽 그리드에서 브라질의 상파울루
노드를 아르헨티나
의 하위 노드로 이동할 수 있습니다.
아래 코드는 변화를 잘 볼 수 있도록 모든 노드를 접고, 브라질과 아르헨티나 노드만 펼칩니다.
1
2
3
4
5
6
//일단 모두 접기
treeView.collapseAll();
//브라질(ItemIndex = 1) 노드 펼치기
treeView.expand(1, true);
//아르헨티나 노드(ItemIndex = 0) 펼치기
treeView.expand(0);
TreeDataProvider.changeRowParent()함수를 사용하려면 이동할 노드와 목적 노드의 RowId를 알아야 합니다. 보통은 GridBase.getCurrent()함수를 통해 RowId를 가져오지만 여기서는 실습을 위해 미리 정해진 RowId를 사용합니다.
RowId
는 10
입니다.RowId
는 1
입니다.1
2
3
4
// 상파울루(RowId = 10)를 아르헨티나(RowId = 1) 하위 두 번째 노드(index = 1)로 이동하기
treeDataProvider.changeRowParent(10, 1, 1);
//상파울루노드(RowId = 10)에 포커스 이동하기
treeView.setCurrent({dataRow: 10});