Class IgxTreeComponent

IgxTreeComponent を使用すると、開発者は一連のノードを階層的に表示できます。

Igx Module

IgxTreeModule

Igx Keywords

tree

Igx Theme

igx-tree-theme

Igx Group

グリッド & リスト

備考

Angular Tree コンポーネントを使用すると、ユーザーはツリービュー構造で階層データを表現し、親子関係を維持したり、 対応するデータ モデルなしで静的ツリービュー構造を定義したりできます。 その主な目的は、エンドユーザーが階層データ構造内を視覚化してナビゲートできるようにすることです。 Ignite UI for Angular Tree コンポーネントは、組み込みのチェックボックス、組み込みのキーボード ナビゲーションなどを通じて、 ロードオンデマンド機能、項目のアクティブ化、項目の bi-state およびカスケード選択も提供します。

<igx-tree>
<igx-tree-node>
I am a parent node 1
<igx-tree-node>
I am a child node 1
</igx-tree-node>
...
</igx-tree-node>
...
</igx-tree>

階層

Hierarchy

  • DisplayDensityBase
    • IgxTreeComponent

実装

  • IgxTree
  • OnInit
  • AfterViewInit
  • OnDestroy

コンストラクター

プロパティ

activeNodeChanged: EventEmitter<IgxTreeNode<any>> = ...

アクティブなノードが変更されたときに発生します。

<igx-tree (activeNodeChanged)="activeNodeChanged($event)"></igx-tree>
animationSettings: ToggleAnimationSettings = ...

ブランチが展開/折りたたみ時に使用するアニメーション設定を取得/設定します。

<igx-tree [animationSettings]="customAnimationSettings">
</igx-tree>
const animationSettings: ToggleAnimationSettings = {
openAnimation: growVerIn,
closeAnimation: growVerOut
};

this.tree.animationSettings = animationSettings;
cssClass: string = 'igx-tree'
densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
expandIndicator: TemplateRef<any>

ノードの展開インジケーターに使用されるカスタム テンプレート

<igx-tree>
<ng-template igxTreeExpandIndicator let-expanded>
<igx-icon>{{ expanded ? "close_fullscreen": "open_in_full"}}</igx-icon>
</ng-template>
</igx-tree>
nodeCollapsed: EventEmitter<ITreeNodeToggledEventArgs> = ...

ノードが完了した後にノードが縮小されたときに発生されます。

<igx-tree (nodeCollapsed)="handleNodeCollapsed($event)">
</igx-tree>
public handleNodeCollapsed(event: ITreeNodeToggledEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
console.log("Node is collapsed: ", collapsedNode.data);
}
nodeCollapsing: EventEmitter<ITreeNodeTogglingEventArgs> = ...

ノードが縮小するときに終了する前に発生します。

<igx-tree (nodeCollapsing)="handleNodeCollapsing($event)">
</igx-tree>
public handleNodeCollapsing(event: ITreeNodeTogglingEventArgs) {
const collapsedNode: IgxTreeNode<any> = event.node;
if (collapsedNode.alwaysOpen) {
event.cancel = true;
}
}
nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs> = ...

ノードが完了した後にノードが展開されたときに発生されます。

<igx-tree (nodeExpanded)="handleNodeExpanded($event)">
</igx-tree>
public handleNodeExpanded(event: ITreeNodeToggledEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
console.log("Node is expanded: ", expandedNode.data);
}
nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs> = ...

ノードが展開するときに終了する前に発生します。

<igx-tree (nodeExpanding)="handleNodeExpanding($event)">
</igx-tree>
public handleNodeExpanding(event: ITreeNodeTogglingEventArgs) {
const expandedNode: IgxTreeNode<any> = event.node;
if (expandedNode.disabled) {
event.cancel = true;
}
}
nodeSelection: EventEmitter<ITreeNodeSelectionEvent> = ...

ノードの選択が操作によって変更されたときに発生されます。

<igx-tree (nodeSelection)="handleNodeSelection($event)">
</igx-tree>
public handleNodeSelection(event: ITreeNodeSelectionEvent) {
const newSelection: IgxTreeNode<any>[] = event.newSelection;
const added: IgxTreeNode<any>[] = event.added;
console.log("New selection will be: ", newSelection);
console.log("Added nodes: ", event.added);
}
singleBranchExpand: boolean = false

ツリーがブランチ展開を処理する方法を取得または設定します。 true に設定すると、一度に展開できるブランチは 1 つのみで、その他のブランチはすべて縮小されます。

<igx-tree [singleBranchExpand]="true">
...
</igx-tree>
const tree: IgxTree = this.tree;
this.tree.singleBranchExpand = false;

アクセサー

  • get displayDensity(): DisplayDensity
  • 非推奨

    バージョン 16.1.x 以降。 --ig-size CSS カスタム プロパティを使用してください。

    参照

    アップデート ガイド

    コンポーネントのテーマを返します。 デフォルトのテーマは comfortable です。 利用可能なオプションは comfortablecosy、または compact です。

    let componentTheme = this.component.displayDensity;
    

    返却 DisplayDensity

  • set displayDensity(val): void
  • コンポーネントのテーマを設定します。

    パラメーター

    返却 void

メソッド

  • 渡されたすべてのノードを縮小します。 渡されたノードがない場合、すべてのノードを縮小します。

    パラメーター

    • Optional nodes: IgxTreeNode<any>[]

      縮小されるノード

      const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.collapsible);
      tree.collapseAll(nodes);

    返却 void

  • ノード コレクションが空の場合、すべてのノードの選択を解除します。それ以外の場合は、ノード コレクションのノードを選択解除します。

     const arr = [
    this.tree.nodes.toArray()[0],
    this.tree.nodes.toArray()[1]
    ];
    this.tree.deselectAll(arr);

    パラメーター

    返却 void

  • 渡されたすべてのノードを展開します。 渡されたノードがない場合、すべてのノードを展開します。

    パラメーター

    • Optional nodes: IgxTreeNode<any>[]

      展開するノード

      const targetNodes: IgxTreeNode<any> = this.tree.findNodes(true, (_data: any, node: IgxTreeNode<any>) => node.data.expandable);
      tree.expandAll(nodes);

    返却 void

  • 渡された searchTerm に一致するすべてのノードを返します。 ノードに対して検索語を評価するためのカスタム比較関数を受け入れます。

    備考

    デフォルトの検索では、渡された searchTerm をノードの data 入力と比較します。 comparer なしでfindNodes を使用する場合、すべてのノードに data が渡されることを確認してください。

    返却

    検索に一致するノードの配列です。ノードが見つからない場合はnull です。

    <igx-tree>
    <igx-tree-node *ngFor="let node of data" [data]="node">
    {{ node.label }}
    </igx-tree-node>
    </igx-tree>
    public data: DataEntry[] = FETCHED_DATA;
    ...
    const matchedNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(searchTerm: data[5]);

    スタム比較子の使用

    public data: DataEntry[] = FETCHED_DATA;
    ...
    const comparer: IgxTreeSearchResolver = (data: any, node: IgxTreeNode<DataEntry>) {
    return node.data.index % 2 === 0;
    }
    const evenIndexNodes: IgxTreeNode<DataEntry>[] = this.tree.findNodes<DataEntry>(null, comparer);

    パラメーター

    • searchTerm: any

      検索されたノードのデータ

    • Optional comparer: IgxTreeSearchResolver

      渡された searchTerm をすべてのノードに対して評価するカスタム比較関数です。

    返却 IgxTreeNodeComponent<any>[]

  • 表示密度の値に基づいて --component-size CSS 変数を設定します。

    返却 "var(--ig-size, var(--ig-size-small))" | "var(--ig-size, var(--ig-size-medium))" | "var(--ig-size, var(--ig-size-large))"