ツリービュー：ユーザー操作

ノードの編集

TreeViewコントロールは編集がサポートされています。isReadOnlyプロパティをfalseに設定すると、［F2］キーを押してノードのコンテンツを編集することができます。

ノードのコンテンツに行われた編集は、displayMemberPathプロパティによって指定されたプロパティを使用して、itemsSource配列内の項目に自動的に適用されます。

nodeEditStarting、nodeEditStarted、nodeEditEnding、nodeEditEndedの各イベントを使用して、編集動作をカスタマイズできます。

例

編集は、子ノードを含まないノードでのみ有効になっています。編集するには、ノードを選択し、［F2］を押します。

HTML

<div id="theTree"></div>

JavaScript

// ツリーを作成します
var tree = new wjNav.TreeView('#theTree', {
    itemsSource: getData(),
    displayMemberPath: 'header',
        childItemsPath: 'items',
        isReadOnly: false,
        nodeEditStarting: function (s, e) {
        if (e.node.hasChildren) {
            e.cancel = true;
        }
    }
});

// ツリーデータを取得します
function getData() {
    return [
        {
            header: '電子機器', items: [
                { header: 'トリマー/シェーバー' },
                { header: 'タブレット' },
                {
                    header: 'スマートフォン', items: [
                        { header: 'アップル' },
                        { header: 'モトローラ', newItem: true },
                        { header: 'ノキア' },
                        { header: 'サムスン' }
                    ]
                },
                { header: 'スピーカー', newItem: true },
                { header: 'モニター' }
            ]
        },
        {
            header: '玩具', items: [
                { header: 'ショップキンズ' },
                { header: '電車セット' },
                { header: '科学キット', newItem: true },
                { header: '粘土' },
                { header: 'クレヨラ' }
            ]
        },
        {
            header: '家電', items: [
                { header: 'コーヒーメーカー' },
                { header: 'ホームベーカリー', newItem: true },
                { header: 'ソーラーパネル', newItem: true },
                { header: '作業テーブル' },
                { header: 'プロパングリル' }
            ]
        }
    ];
}

ノードの無効化

TreeNodeのisDisabledプロパティを使用すると、ノードを無効にすることができます。

無効にされたノードは、マウスまたはキーボードを使用して選択することができません。

例

選択されたノードをボタンクリックで無効にする方法を示します。

JavaScript

document.getElementById('btDisable').addEventListener('click', function(e) {
    //現在選択されているノードを取得します
    var nd = tree.selectedNode;
    if (nd) {
            //ノードを無効にします
        nd.isDisabled = true;
    }
});

ノードの表示と選択

TreeNodeクラスには、必要に応じて親ノードを展開したりノードをビューまでスクロールすることで、ノードが表示されるようにするensureVisibleメソッドがあります。ノードを表示して選択するselectメソッドもあります。

例

"作業テーブル"ノードを表示して選択する方法を示します。

onload = function() {

    // 表示するノード、または選択して表示するノードを検索します
    var theItem = findItem(tree.itemsSource, '作業テーブル');
    var theNode = tree.getNode(theItem);

    // ユーザーがボタンをクリックすると、ノードが表示されます
    document.getElementById('btnShow').addEventListener('click', function()     {
        theNode.ensureVisible();
    });

    //ユーザーがボタンをクリックすると、ノードが表示されて選択されます
    document.getElementById('btnSelect').addEventListener('click', function()     {
        theNode.select();
    });

    //表示または選択するTreeView項目を検索します
    function findItem(items, text) {
        var node = null;
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.header == text) {
                return item;
            }
            if (item.items) {
                item = findItem(item.items, text);
                if (item) {
                    return item;
                }
            }
        }
        return null; //    見つかりません
    }
}