wj-tree-view ディレクティブを使用して、AngularJSアプリケーションにTreeViewを追加できます。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。次に例を示します。

<wj-tree-view  items-source="items"
  display-member-path="ctx.displayMemberPath"
  child-items-path="ctx.childItemsPath"
  is-animated="ctx.isAnimated">
</wj-tree-view>

wj-tree-view ディレクティブは、次の属性をサポートします。

items-source

= TreeView 項目を含む配列。

child-items-path

@ 各ノードの子項目を含む1つ以上のプロパティの名前を示す値。

control

=このディレクティブによって作成された TreeView コントロールへの参照。

display-member-path

@ ノードのビジュアル表現として使用する1つ以上のプロパティの名前を示す値。

image-member-path

@ ノードの画像のソースとして使用する1つ以上のプロパティの名前を示す値。

is-content-html

@ 項目がプレーンテキストとHTMLの どちらに連結されているかを示す値。

initialized

& このイベントは、連結が属性値によるコントロールの初期化を 完了した後に発生します。

is-initialized

= 連結が、属性値によるコントロールの初期化を 完了したかどうかを示す値。

show-checkboxes

@ TreeView で、ノードにチェックボックスを追加し、 その状態を管理するかどうかを指定する値。

auto-collapse

@ ノードが展開されたときに、兄弟ノードを折りたたむかどうかを指定する値。

is-animated

@ ノードを展開または折りたたむときにアニメーションを使用するかどうかを示す値。

is-readOnly

@ ユーザーがノード内のテキストを編集できるかどうかを指定する値。

allow-dragging

@ ユーザーが TreeView 内でノードをドラッグアンドドロップできるかどうかを指定する値。

expand-on-click

@ ユーザーがノードヘッダーをクリックしたとき、に折りたたまれているノードを展開するかどうかを指定する値。

selected-item

@ 現在選択されているデータ項目を示す値。

selected-node

@ 現在選択されている TreeNode を示す値。

checked-items

@ 現在オンに設定されている項目を含む配列。

lazy-load-function

= オンデマンドで子ノードをロードする関数。

items-source-changed

& The TreeView.itemsSourceChanged event handler.

loading-items

& TreeView.loadingItems イベントハンドラ。

loaded-items

&TreeView.loadedItems イベントハンドラ。

item-clicked

&TreeView.itemClicked イベントハンドラ。

selected-item-changed

& TreeView.selectedItemChanged イベントハンドラ。

checked-items-Changed

& TreeView.checkedItemsChanged イベントハンドラ。

is-collapsed-changing

& TreeView.isCollapsedChanging イベントハンドラ。

is-collapsed-changed

& TreeView.isCollapsedChanged イベントハンドラ。

is-checked-changing

& TreeView.isCheckedChanging イベントハンドラ。

is-checked-changed

& TreeView.isCheckedChanged イベントハンドラ。

format-item

& TreeView.formatItem イベントハンドラ。

drag-start

& TreeView.dragStart イベントハンドラ。

drag-over

& TreeView.dragOver イベントハンドラ。

drop

& TreeView.drop イベントハンドラ。

drag-end

& TreeView.dragEnd イベントハンドラ。

node-edit-starting

& TreeView.nodeEditStarting イベントハンドラ。

node-edit-started

& TreeView.nodeEditStarted イベントハンドラ。

node-edit-ending

& TreeView.nodeEditEnding イベントハンドラ。

node-edit-ended

& TreeView.nodeEditEnded イベントハンドラ。