このプロパティのデフォルト値は false です。

このプロパティは、デフォルトでは true に設定されています。 通常は、使用していないノードを折りたたんだ方がUIがすっきりするためです。

このプロパティのデフォルト値は false です。これにより、ユーザーがノードヘッダーではなく チェックボックス自体をクリックした場合にのみチェックボックスのオン・オフが切り替わります。

showCheckboxes プロパティと checkedItemsChanged イベントを参照してください。

返される配列には、子を持たない項目だけが含まれます。 これは、親項目のチェックボックスが子項目のオンまたはオフに 使用されるからです。

showCheckboxes プロパティと checkedItemsChanged イベントも参照してください。

次に例を示します。

import { TreeView } from '@mescius/wijmo.nav';
var treeViewChk = new TreeView('#gsTreeViewChk', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   showCheckboxes: true,
   itemsSource: items,
   checkedItemsChanged: function (s, e) {
       var items = s.checkedItems,
           msg = '';
       if (items.length) {
           msg = '<p><b>Selected Items:</b></p><ol>\r\n';
           for (var i = 0; i < items.length; i++) {
               msg += '<li>' + items[i].header + '</li>\r\n';
           }
           msg += '</ol>';
       }
       document.getElementById('gsTreeViewChkStatus').innerHTML = msg;
   }
});

showCheckboxes プロパティと checkedItemsChanged イベントも参照してください。

このプロパティのデフォルト値は文字列"items"です。

ほとんどの場合、子項目を含むプロパティは、 ツリーのすべてのデータ項目で同じです。このような場合は、 childItemsPath にその名前を設定します。

ただし、項目のレベルごとに異なるプロパティを使用して 子項目を保存する場合もあります。たとえば、カテゴリ、製品、注文から成る ツリーがあるとします。その場合に、 childItemsPath に次のような配列を設定します。

// カテゴリ、製品、注文のヘッダーがそれぞれ異なります
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];

このプロパティのデフォルト値は false です。

このプロパティが false に設定されている場合、ノードを折りたたむために展開/折りたたみアイコンをクリックする必要があります。 ノードのヘッダーをクリックすると、選択されていない場合はノードが選択され、選択されている場合はノードの編集が開始されます (isReadOnly プロパティが false に設定されている場合)。

また、詳細については、expandOnClick プロパティをご参照ください。

このプロパティのデフォルト値は true。

このプロパティのデフォルト値は文字列"header"です。

ほとんどの場合、ノードテキストを含むプロパティは、 ツリーのすべてのデータ項目で同じです。このような場合は、 displayMemberPath にその名前を設定します。

ただし、項目のレベルごとに異なるプロパティを使用して ノードテキストを表す場合もあります。たとえば、カテゴリ、製品、注文から成る ツリーがあるとします。その場合に、 displayMemberPath に次のような配列を設定します。

// カテゴリ、製品、注文のヘッダーがそれぞれ異なります
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];

このプロパティのデフォルト値は true です。

このプロパティが false に設定されている場合、ノードを折りたたむために展開/折りたたみアイコンをクリックする必要があります。 ノードのヘッダーをクリックすると、選択されていない場合はノードが選択され、選択されている場合はノードの編集が開始されます (isReadOnly プロパティが false に設定されている場合)。

また、詳細については、collapseOnClick プロパティをご参照ください。

このプロパティのデフォルト値は true です。 falseに設定された場合、すべてのノードが折りたたんだ状態で表示されます。

このプロパティのデフォルト値は空の文字列です。これは、ノードに画像が追加されないことを示します。

このプロパティのデフォルト値は true。

このプロパティのデフォルト値は false です。

isReadOnly プロパティをfalseに設定すると、ノードに直接入力することで ツリーノードのコンテンツを編集することができます。ノードのコンテンツ全体を選択した状態で、 ［F2］キーを使用して編集モードに入ることもできます。 次のメソッドとイベントを使用して、編集動作をカスタマイズできます。

メソッド：: startEditing、 finishEditing.

イベント>: nodeEditStarting、 nodeEditStarted、 nodeEditEnding、 nodeEditEnded。

このプロパティのデフォルト値は b>true/b>です。

TreeView itemsSource 配列は一般に、 子項目を含む項目から成る階層構造を持ちます。項目の深さに制限はありません。

たとえば、次の配列は、それぞれが2つの子ノードを持つ 3つの最上位ノードを含むツリーを生成します。

import { TreeView } from '@mescius/wijmo.nav';
var tree = new TreeView('#treeView', {
    displayMemberPath: 'header',
    childItemsPath: 'items',
    itemsSource: [
        { header: '1 first', items: [
            { header: '1.1 first child' },
            { header: '1.2 second child' },
        ] },
        { header: '2 second', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] },
        { header: '3 third', items: [
            { header: '3.1 first child' },
            { header: '3.2 second child' },
        ] }
    ]
});

lazyLoadFunction は、2つのパラメータとして、展開されるノードと、 データが取得可能になったときに呼び出されるコールバックを 受け取ります。

コールバック関数は、TreeView にノードのロードプロセスが 完了したことを通知します。データのロード時にエラーがあっても、 コールバックは必ず呼び出されます。

次に例を示します。

import { TreeView } from '@mescius/wijmo.nav';
var treeViewLazyLoad = new TreeView('#treeViewLazyLoad', {
   displayMemberPath: 'header',
   childItemsPath: 'items',
   itemsSource: [ // 3つの遅延ロードノードから開始します
       { header: 'Lazy Node 1', items: []},
       { header: 'Lazy Node 2', items: [] },
       { header: 'Lazy Node 3', items: [] }
   ],
   lazyLoadFunction: function (node, callback) {
       setTimeout(function () { // httpの遅延をシミュレーションします
           var result = [ // 結果をシミュレーションします
               { header: 'Another lazy node...', items: [] },
               { header: 'A non-lazy node without children' },
               { header: 'A non-lazy node with child nodes', items: [
                 { header: 'hello' },
                 { header: 'world' }
               ]}
           ];
           callback(result); // コントロールに結果を返します
       }, 2500); // 2.5秒のhttpの遅延をシミュレーションします
   }
});

遅延ロードノードを含むツリーには、それぞれのノードにチェックボックスが ないことがある（showCheckboxes プロパティを参照）、 {@link collpaseToLevel} メソッドがまだロードされていない折りたたみ ノードを展開しない、といった制限があります。

このプロパティのデフォルト値は false です。

このプロパティは、遅延ロードノードがないツリーでのみ使用できます （lazyLoadFunction プロパティを参照）。

checkedItems プロパティとcheckedItemsChanged イベントも参照してください。

このプロパティのデフォルト値は false.です。