Nodes 조작
노드 추가
트리에 노드를 추가하려면 부모 노드의 addChildNode 메서드를 호출합니다. 루트 레벨에 노드를 추가하려면 TreeView의 addChildNode 메서드를 호출합니다.
이 방법은 트리의 itemsSource 배열에 데이터를 추가하고 loadTree 메서드를 호출하여 트리를 새로 고침하는 것보다 더 효율적입니다.
예제 : 현재 선택된 노드가 있으면 해당 노드에 자식 노드를 추가하고, 선택된 노드가 없으면 트리의 루트 레벨에 자식 노드를 추가하는 방법을 보여줍니다.
Javascript
import * as wjNav from '@mescius/wijmo.nav';
// create the tree
var theTree = new wjNav.TreeView('#theTree', {
itemsSource: getData(),
displayMemberPath: 'header',
childItemsPath: 'items'
});
// handle button click to add a child node
document.getElementById('btnAdd').addEventListener('click', function () {
var newItem = { header: document.getElementById('theInput').value },
node = theTree.selectedNode;
if (node) {
theTree.selectedNode = node.addChildNode(0, newItem);
} else {
theTree.selectedNode = theTree.addChildNode(0, newItem);
}
});
}노드 삭제
TreeView 컨트롤에서 노드를 제거하려면 트리의 itemsSource 배열에서 데이터 항목을 제거한 후, loadTree 메서드를 호출하여 트리를 새로 고칩니다.
예제: 현재 선택된 노드를 제거하는 방법을 보여줍니다.
Javascript
document.getElementById('btnRemove').addEventListener('click', function(){
if (theTree.selectedItem) {
// find the array that contains the item to be removed
var parent = theTree.selectedNode.parentNode;
var arr = parent ? parent.dataItem[theTree.childItemsPath]: theTree.itemsSource;
// remove the item from the parent collection
var index = arr.indexOf(theTree.selectedItem);
arr.splice(index, 1);
// refresh the tree
theTree.loadTree();
}
});노드 새로고침
노드의 데이터가 변경된 후 노드를 새로 고치려면 노드의 refresh 메서드를 호출합니다.
이 방법은 데이터를 업데이트하고 loadTree메서드를 호출하여 트리를 새로 고치는 것보다 더 효율적입니다.
예제 : 새 데이터를 전달하여 refresh 메서드를 호출하는 방법과, 새로운 데이터로 노드를 업데이트한 후 refresh 메서드를 호출하는 두 가지 방법을 보여줍니다.
Javascript
// refresh the node with new data
document.getElementById('btnItemData').addEventListener('click', function () {
theTree.selectedNode.refresh({
header: 'given itemData ' + Date.now(), items: [
{ header: 'first child' },
{ header: 'second child' },
]
});
});
// update the data, refresh the node
document.getElementById('btnItemsSource').addEventListener('click', function () {
var node = theTree.selectedNode,
arr = node.itemsSource;
arr[node.index] = {
header: 'updated itemData ' + Date.now(), items: [
{ header: 'first child' },
{ header: 'second child' },
]
};
node.refresh();
});