constructor(element: any, options?: any): TreeView
Initializes a new instance of the TreeView class.
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
Gets or sets a value that determines whether users can drag and drop nodes within the TreeView.
このプロパティのデフォルト値は **false**です。
Gets or sets a value that determines if sibling nodes should be collapsed when a node is expanded.
The default value for this property is **true**, because in most cases collapsing nodes that are not in use helps keep the UI clean.
現在オンに設定されている項目が含まれる配列を取得します。
The array returned includes only items that have no children. This is because checkboxes in parent items are used to check or uncheck the child items.
See also the showCheckboxes property and the checkedItemsChanged event.
For example:
```typescript import { TreeView } from '@grapecity/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; } }); ```
Gets or sets the name of the property (or properties) to bind to the node's checked state.
See also the showCheckboxes property and the checkedItemsChanged event.
Gets or sets a value that determines whether to toggle checkboxes when the user clicks the node header.
The default value for this property is **false**, which causes checkboxes to be toggled only when the user clicks the checkbox itself (not the node header).
See also the showCheckboxes property and the checkedItemsChanged event.
各ノードの子項目を含む1つ以上のプロパティの名前を取得または設定します。
The default value for this property is the string **"items"**.
In most cases, the property that contains the child items is the same for all data items on the tree. In these cases, set the childItemsPath to that name.
In some cases, however, items at different levels use different properties to store their child items. For example, you could have a tree with categories, products, and orders. In that case, you would set the childItemsPath to an array such as this:
// categories have products, products have orders:
tree.childItemsPath = [ 'Products', 'Orders' ];
Gets or sets a value that determines whether to collapse expanded nodes when the user clicks the node header.
このプロパティのデフォルト値は **false**です。
When this property is set to **false**, users have to click the expand/collapse icons to collapse the node. Clicking the node header will select the node if it is not selected, and will start editing the node if it is selected (and if the isReadOnly property is set to false).
See also the expandOnClick property.
Gets or sets a value that determines whether nodes should be collapsed when they are disabled.
このプロパティのデフォルト値は**true**です。
ノードのビジュアル表現として使用される1つ以上のプロパティの名前を取得または設定します。
The default value for this property is the string **"header"**.
In most cases, the property that contains the node text is the same for all data items on the tree. In these cases, set the displayMemberPath to that name.
In some cases, however, items at different levels use different properties to represent them. For example, you could have a tree with categories, products, and orders. In that case, you might set the displayMemberPath to an array such as this:
// categories, products, and orders have different headers:
tree.displayMemberPath = [ 'CategoryName', 'ProductName', 'OrderID' ];
Gets or sets a value that determines whether to expand collapsed nodes when the user clicks the node header.
このプロパティのデフォルト値は**true**です。
When this property is set to **false**, users have to click the expand/collapse icons to collapse the node. Clicking the node header will select the node if it is not selected, and will start editing the node if it is selected (and if the isReadOnly property is set to false).
See also the collapseOnClick property.
Gets or sets a value that determines whether to automatically expand the first node when the tree is loaded.
The default value for this property is **true**. If you set it to false, all nodes will be initially collapsed.
ノードの画像のソースとして使用する1つ以上のプロパティの名前を取得または設定します。
The default value for this property is an empty string, which means no images are added to the nodes.
Gets or sets a value that indicates whether to use animations when expanding or collapsing nodes.
このプロパティのデフォルト値は**true**です。
Gets or sets a value indicating whether items are bound to plain text or HTML.
このプロパティのデフォルト値は **false**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
Gets or sets a value that determines whether users can edit the text in the nodes.
When the isReadOnly property is set to false, users may edit the content of the tree nodes by typing directly into the nodes. The F2 key can also be used to enter edit mode with the whole node content selected.
You may customize the editing behavior using the following methods and events:
**Methods**: startEditing, finishEditing.
**Events**: nodeEditStarting, nodeEditStarted, nodeEditEnding, nodeEditEnded.
このプロパティのデフォルト値は**true**です。
Gets or sets the array that contains the TreeView items.
TreeView #see:itemsSource arrays usually have a hierarchical structure with items that contain child items. There is no fixed limit to the depth of the items.
たとえば、次の配列は、それぞれが2つの子ノードを持つ 3つの最上位ノードを含むツリーを生成します。
```typescript import { TreeView } from '@grapecity/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' }, ] } ] }); ```
オンデマンドで子ノードをロードする関数を取得または設定します。
The lazyLoadFunction takes two parameters: the node being expanded and a callback to be invoked when the data becomes available.
The callback function tells the TreeView that the node loading process has been completed. It should always be called, even if there are errors when loading the data.
For example:
```typescript import { TreeView } from '@grapecity/wijmo.nav'; var treeViewLazyLoad = new TreeView('#treeViewLazyLoad', { displayMemberPath: 'header', childItemsPath: 'items', itemsSource: [ // start with three lazy-loaded nodes { header: 'Lazy Node 1', items: []}, { header: 'Lazy Node 2', items: [] }, { header: 'Lazy Node 3', items: [] } ], lazyLoadFunction: function (node, callback) { setTimeout(function () { // simulate http delay var result = [ // simulate 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); // return result to control }, 2500); // simulated 2.5 sec http delay } }); ```
Trees with lazy-loaded nodes have some restrictions: their nodes may not have checkboxes (see the showCheckboxes property) and the collapseToLevel method will not expand collapsed nodes that have not been loaded yet.
現在選択されているデータ項目を取得または設定します。
Gets or sets a value that determines whether the TreeView should add checkboxes to nodes and manage their state.
This property can be used only on trees without lazy-loaded nodes (see the lazyLoadFunction property).
See also the checkedItems property and checkedItemsChanged event.
このプロパティのデフォルト値は **false**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
addChildNode(index: number, dataItem: any): TreeNode
特定の位置に子ノードを追加します。
Index of the new child node.
Data item used to create the new node.
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます(dispose と removeEventListener メソッドを参照してください)。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
checkAllItems(check: boolean): void
ツリーのすべてのチェックボックスをオンまたはオフにします。
Whether to check or uncheck all checkboxes.
collapseToLevel(level: number): void
すべてのツリー項目を指定されたレベルまで折りたたみます。
This method will typically expand or collapse multiple nodes at once. But it will not perform lazy-loading on any nodes, so collapsed nodes that must be lazy-loaded will not be expanded.
Maximum node level to show.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
finishEditing(cancel?: boolean): boolean
保留中の編集をすべてコミットし、編集モードを終了します。
Whether pending edits should be canceled or committed.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getFirstNode(visible?: boolean, enabled?: boolean): TreeNode
Whether to return only visible nodes (whose ancestors are not collapsed).
Whether to return only enabled nodes (whose ancestors are not disabled).
getLastNode(visible?: boolean, enabled?: boolean): TreeNode
Whether to return only visible nodes (whose ancestors are not collapsed).
Whether to return only enabled nodes (whose ancestors are not disabled).
getNode(item: any): TreeNode
Gets the TreeNode object representing a given data item.
The data item to look for.
getTemplate(): string
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript grid.initialize({ itemsSource: myList, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'Code', width: 130 }, { binding: 'name', header: 'Name', width: 60 } ] });
// 以下と同等です。 grid.itemsSource = myList; grid.autoGenerateColumns = false; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
loadTree(preserveOutlineState?: boolean): void
Loads the tree using data from the current itemsSource.
Whether to preserve the outline state when loading the tree data. Defaults to false.
onCheckedItemsChanged(e?: EventArgs): void
checkedItemsChangedイベントを発生させます。
onDragEnd(e?: EventArgs): void
Raises the dragEnd event.
onDragOver(e: TreeNodeDragDropEventArgs): boolean
Raises the dragOver event.
TreeNodeDragDropEventArgs that contains the event data.
onDragStart(e: TreeNodeEventArgs): boolean
Raises the dragStart event.
TreeNodeEventArgs that contains the event data.
onDrop(e: TreeNodeDragDropEventArgs): boolean
Raises the drop event.
TreeNodeDragDropEventArgs that contains the event data.
onFormatItem(e: FormatNodeEventArgs): void
formatItem イベントを発生させます。
FormatNodeEventArgs that contains the event data.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onIsCheckedChanged(e: TreeNodeEventArgs): void
Raises the isCheckedChanged event.
TreeNodeEventArgs that contains the event data.
onIsCheckedChanging(e: TreeNodeEventArgs): boolean
Raises the isCheckedChanging event.
TreeNodeEventArgs that contains the event data.
onIsCollapsedChanged(e: TreeNodeEventArgs): void
Raises the isCollapsedChanged event.
TreeNodeEventArgs that contains the event data.
onIsCollapsedChanging(e: TreeNodeEventArgs): boolean
Raises the isCollapsedChanging event.
TreeNodeEventArgs that contains the event data.
onItemClicked(e?: EventArgs): void
Raises the itemClicked event.
onItemsSourceChanged(e?: EventArgs): void
itemsSourceChanged イベントを発生させます。
onLoadedItems(e?: EventArgs): void
loadedItemsイベントを発生させます。
onLoadingItems(e?: CancelEventArgs): boolean
loadingItemsイベントを発生させます。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onNodeEditEnded(e: TreeNodeEventArgs): void
Raises the nodeEditEnded event.
TreeNodeEventArgs that contains the event data.
onNodeEditEnding(e: TreeNodeEventArgs): boolean
Raises the nodeEditEnding event.
TreeNodeEventArgs that contains the event data.
onNodeEditStarted(e: TreeNodeEventArgs): void
Raises the nodeEditStarted event.
TreeNodeEventArgs that contains the event data.
onNodeEditStarting(e: TreeNodeEventArgs): boolean
Raises the nodeEditStarting event.
TreeNodeEventArgs that contains the event data.
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onSelectedItemChanged(e?: EventArgs): void
Raises the selectedItemChanged event.
refresh(fullUpdate?: boolean): void
ツリーを再作成するためにオーバーライドされます。
Indicates whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
checkedItems プロパティの値が変化すると発生します。
See also the showCheckboxes and checkOnClick properties.
Occurs while the user drags a node over other nodes on the TreeView.
This event only occurs if the allowDragging property is set to true.
You may prevent drop operations over certain nodes and/or positions by setting the event's **cancel** parameter to true.
ユーザーが行のドラッグを開始するときに発生します。
This event only occurs if the allowDragging property is set to true.
You may prevent nodes from being dragged by setting the event's **cancel** parameter to true.
ノードを表す要素が作成されたときに発生します。
このイベントを使用して、表示するノードを書式設定できます。
The example below uses the **formatItem** event to add a "new" badge to the right of new items on the tree.
```typescript import { TreeView } from '@grapecity/wijmo.nav'; var treeViewFmtItem = new TreeView('#treeViewFmtItem', { displayMemberPath: 'header', childItemsPath: 'items', itemsSource: items, formatItem: function (s, e) { if (e.dataItem.newItem) { e.element.innerHTML += '<img style="margin-left:6px" src="resources/new.png"/>'; } } }); ```
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
Occurs before the value of the isCollapsed property changes.
ユーザーが項目をクリックするか、[Enter]キーを押して、項目が選択されたときに発生します。
This event is typically used in navigation trees. Use the selectedItem property to get the item that was clicked.
The TreeView control displays a hierarchical list of TreeNode objects which may contain text, checkboxes, images, or arbitrary HTML content.
A TreeView is typically used to display the headings in a document, the entries in an index, the files and directories on a disk, or any other kind of information that might usefully be displayed as a hierarchy.
After creating a TreeView, you will typically set the following properties:
The TreeView control supports the following keyboard commands:
The example below builds a simple tree and allows you to see the effect of the TreeView's main properties:
{@sample Nav/TreeView/Behavior/purejs Example}