ツリービュー：ノードの操作

ノードの追加

ツリーにノードを追加するには、親ノードのaddChildNodeメソッドを呼び出します。ルートレベルにノードを追加するには、TreeViewのaddChildNodeメソッドを呼び出します。

このメソッドを使用すると、データ項目をツリーのitemsSource配列に追加し、loadTreeを呼び出してツリーをリフレッシュするよりも効率的です。

例：既存のノードが選択されている場合はそのノードに子ノードを追加し、現在選択されているノードがない場合はツリーのルートレベルに子ノードを追加します。

JavaScript

import * as wjNav from '@mescius/wijmo.nav';

// ツリーを作成します
var theTree = new wjNav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
    childItemsPath: 'items'
});

// ボタンクリックを処理して子ノードを追加します
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) {

        // 削除する項目を含む配列を検索します
        var parent = theTree.selectedNode.parentNode;
        var arr = parent ? parent.dataItem[theTree.childItemsPath]: theTree.itemsSource;

        // 親コレクションから項目を削除します
        var index = arr.indexOf(theTree.selectedItem);
        arr.splice(index, 1);

        // ツリーをリフレッシュします
        theTree.loadTree();
    }
});

ノードの更新

データの変更後にノードをリフレッシュするには、ノードのrefreshメソッドを呼び出します。

このメソッドを使用すると、データを更新し、loadTreeメソッドを呼び出してツリーをリフレッシュするよりも効率的です。

例：2つの方法を示します。1つはrefreshメソッドに新しいデータを渡して呼び出す方法、もう1つは新しいデータでノードを更新してからrefreshメソッドを呼び出す方法です。

JavaScript

// ノードを新しいデータでリフレッシュします
document.getElementById('btnItemData').addEventListener('click', function () {
    theTree.selectedNode.refresh({
        header: '指定したデータ項目 ' + Date.now(),
        items: [
            { header: '最初の子ノード' },
            { header: '二番目の子ノード' }
        ]
    });
});

// データを更新し、ノードをリフレッシュします
document.getElementById('btnItemsSource').addEventListener('click', function () {
    var node = theTree.selectedNode,
            arr = node.itemsSource;
    arr[node.index] = {
        header: '変更したデータ項目 ' + Date.now(),
        items: [
            { header: '最初の子ノード' },
            { header: '二番目の子ノード' }
        ]
    };
    node.refresh();
});