트리뷰
RealGrid의 트리뷰(TreeView)는 트리 노드를 조작하기 위해 다양한 API를 제공하고 있습니다. 접기, 펼치기는 물론, RowId를 이용해 부모 자식간 노드를 이동하거나 자식 노드의 개수를 알 수 있는 함수도 있습니다.
트리노드 모두 펼치기(expand) & 모두 접기(collapse)
TreeView에는 트리 노드를 접고 펼치기 위한 함수들이 있습니다.
- TreeView.expandAll(): 모든 노드 펼치기
- TreeView.collapseAll(): 모든 노드 접기
//모두 펼치기
treeView.expandAll();
//모두 접기
treeView.collapseAll();트리노드 선택 펼치기(expand) & 선택 접기(collapse)
TreeView에는 트리 노드를 접고 펼치기 위한 함수들이 있습니다.
- TreeView.expand(): 선택 노드 펼치기
- TreeView.collapse(): 선택 노드 접기
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);형제 노드의 순서를 위/아래로 이동하기
동일한 형제들 사이에서 특정 노드를 위/아래로 움직일 수 있습니다.
API를 사용하여 이동하거나 마우스 Drag and Drop을 사용하여 이동할 수 있습니다.
마우스 Drag and Drop
마우스로 이동할 노드를 선택하거나 범위선택 후 노드의 앞에 마우스 포인터를 위치하면 + 형태로 마우스 포인터가 변경 됩니다. 그 때 Drag and Drop 하여 이동하면 됩니다. 마우스 Drag and Drop을 사용하려면 아래와 같이 사전에 설정해야 합니다.
treeView.editOptions.movable = true;API를 사용하여 이동
- TreeProvider.moveRowSibling():: 위/아래로 이동하기
var current = treeView.getCurrent();
//노드를 한 줄 위로 이동하기
treeProvider.moveRowSibling(current.dataRow, -1);
treeView.setCurrent({dataRow: current.dataRow});
//노드를 한 줄 아래로 이동하기
treeProvider.moveRowSibling(current.dataRow, +1);
treeView.setCurrent({dataRow: current.dataRow});다른 부모 노드의 자식으로 이동하기
다른 부모의 자식으로 변경하는것은 TreeProvider.changeRowParent()를 사용하여 처리합니다.
남자-아시아에 있는 키프로스를 남자-북아메리카로 이동해보도록 하겠습니다.
//키프로스 dataRow 3, 북아메리카 dataRow 7
treeProvider.changeRowParent(3, 7, 0);