ツリー グリッド

統一性のあるテーブルとして書式設定されたスキーマで階層型データを表示および操作し、並べ替え、フィルタリング、エディティング、列ピン固定、ページング、列移動、非表示など高度な機能を提供します。

デモ


はじめに

ツリー グリッドが NgModule としてエクスポートされるため、アプリケーションで AppModuleIgxTreeGridModule をインポートする必要があります。

// app.module.ts

import { IgxTreeGridModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxTreeGridModule,
        ...
    ]
})
export class AppModule {}

使用方法

IgxTreeGridComponentIgxGridComponent と多数の機能を共有しますが、データを階層で表示する機能も追加されています。 IgxTreeGridComponent は、各データオブジェクトの子コレクションまたは各データオブジェクトに主キーまたは外部キーを使用してデータ オブジェクト内の関係を定義できます。

ツリー セル

ツリー グリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリー グリッドの行は 2 タイプのセルで構成されます。

  • IgxGridCellComponent - 値を含む標準セル。
  • IgxTreeGridCellComponent - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。インナー treeRowlevel プロパティでアクセスできる行コンポーネント レベル。
Note

各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。

初期展開時の深さ

初期時のツリーグリッドは、すべてのノード レベルを展開して表示します。この動作は、expansionDepth プロパティを使用して設定できます。デフォルトの値は Infinity ですべてのノードが展開されます。初期時の展開の深さは、このプロパティを数値に設定して制御できます。たとえば、 0 はルート レベルのノードのみを表示し、1 はルートレベルと子ノードを表示します。

子コレクション

子コレクションのオプションを使用して各データ オブジェクトは子コレクションを含み、親データ オブジェクトとして同じタイプの項目で生成します。これによりツリー グリッドの各レコードがその子への直接の参照を持つことができます。元のデータソースを含むツリー グリッドの data プロパティが階層が定義されたコレクションになります。

このサンプルでは、コレクション ストラクチャを使用します。

// Sample Employee Data

export const EMPLOYEE_DATA = [
    {        
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,                
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,                
                Employees: []
            },
            ...
        ]
    },
    ...            
]

データ コレクションをインポートしてツリーグリッドの data 入力にバインドします。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData">
</igx-tree-grid>

IgxTreeGridComponent を階層にバインドするには、childDataKey プロパティを各データ オブジェクトで使用される子コレクションの名前に設定します。このサンプルでは Employees コレクションです。 更に自動列生成を無効にしてデータ オブジェクトの実際のプロパティとの一致を手動で定義します。Employees コレクションが階層で自動的に使用されるため、列定義に含める必要はありません。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="HireDate" dataType="date"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

rowSelectablepaging を使用してツリー グリッドの行選択とページング機能を有効にします。 各列でフィルタリング、並べ替え、編集、サイズ変更機能を有効にします。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelectable]="true" [paging]="true" [allowFiltering]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

最後にshowToolbarcolumnHidingcolumnPinning を個別に使用して、列非表示と列ピン固定機能を含むツリー グリッドのツールバーを有効にします。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelectable]="true" [paging]="true" [allowFiltering]="true"
               [showToolbar]="true" toolbarTitle="Employees" [columnHiding]="true" [columnPinning]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

このトピックのはじめにあるコードの結果は、デモで確認できます。

プライマリと外部キー

primary and foreign keysオプションを使用した際に各データオブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータ オブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータソースを含むツリー グリッドの data プロパティがフラットコレクションになります。

以下は、主と外部キーの関係を定義したフラット コレクションを含むコンポーネントの例です。

// treeGridSample.component.ts

@Component({
    ...
})
export class MyComponent implements OnInit {

    public data: any[];

    constructor() { }

    public ngOnInit() {
        // Primary and Foreign keys sample data
        this.data = [
            { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
            { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
            { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
            { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
            { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
            { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
            { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
            { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
            { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
            { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
        ];
    }
}

上記サンプル データはすべてのレコードに ID (ParentID と Name, JobTitle、Age.などの追加のプロパティ) があります。レコードの ID は一意である必要があります。ParentID は、親ノードの ID を含みます。行にツリーグリッドのいずれの行にも一致しない ParentID がある場合、行がルート行であることを意味します。

親子関係は、ツリーグリッドの primaryKeyforeignKey プロパティを使用して設定されます。

上記フラット コレクションで定義されたデータを表示するツリーグリッドを設定する方法を示すコンポーネントのテンプレートです。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="JobTitle" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>

更に rowSelectable プロパティを使用してツリーグリッドの行選択機能、および各列でフィルタリング、並べ替え、編集、移動、サイズ変更機能を有効にします。

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false" [rowSelectable]="true" [allowFiltering]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [movable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>

以下は結果です。


Tree Grid 行編集

行編集 - ツリー グリッド データソースに変更をサブミットする前に行の複数セルを一度に変更することが可能です。新しいトランザクション プロバイダーの保留中の変更を利用できます。

rowEditable が有効な場合、editable プロパティが定義されていない場合も field プロパティが定義されたすべての列 (primaryKey を除く) が編集可能になります。特定の列の編集を無効にする場合、editable 列の入力を false に設定します。 以下の手順では、グリッドの rowEditable プロパティで行編集を有効にする方法を示します。

はじめに IgxTreeGridModuleapp.module.ts ファイルにインポートします。

// app.module.ts

import { IgxTreeGridModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxTreeGridModule,
        ...
    ]
})
export class AppModule {}

データ ソースにバインドしたツリーグリッドを定義して rowEditable を true に設定します。

    <igx-tree-grid #treeGrid1 [data]="data" primaryKey="EmployeID" foreignKey="PID" width="100%" height="500px" 
    rowEditable=true rowSelectable=true columnHiding=true>
        <igx-column *ngFor="let c of columns"
            [editable]="c.editable"
            [field]="c.field"
            [dataType]="c.dataType"
            [header]="c.label"
            [movable]="c.movable"
            [resizable]="c.resizable"
            [sortable]="c.sortable"
            [filterable]="c.filterable"
            >
        </igx-column>
    </igx-tree-grid>
Note

行編集を含む編集操作でプライマリキーの設定は必須です。

Note

各列の編集を有効にする必要はありません。グリッドでrowEditable プロパティを使用するとプライマリ行以外 field プロパティを定義したすべての行が編集可能になります。特定の列の編集を無効にする場合、editable 列の入力を false に設定します。

import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxTreeGridComponent } from "igniteui-angular";
...

@Component({
    providers: [],
    selector: "app-tree-grid-row-editing-sample.component",
    styleUrls: ["tree-grid-row-editing-sample.component.scss"],
    templateUrl: "tree-grid-row-editing-sample.component.html"
})
export class TreeGridRowEditSampleComponent implements OnInit {

    public data: any[];
    public columns: any[];

    @ViewChild("treeGrid1") public treeGrid1: IgxTreeGridComponent;
    public ngOnInit(): void {
        this.data = FLAT_DATA;
        this.columns = [
            { field: "FirstName", label: "First Name", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "string" },
            { field: "LastName", label: "Last Name", resizable: false, movable: false, sortable: false, filterable: false, editable: true, dataType: "string" },
            { field: "Title", label: "Title", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "string" },
            { field: "HireDate", label: "Hire Date", resizable: true, movable: true, sortable: true, filterable: true, editable: true, dataType: "date" }
        ];
    }
Note

グリッドは、保留中のセル変更を保持するプロバイダー IgxBaseTransactionService を行ステートをサブミットまたはキャンセルするまで内部使用します。

以下は結果です。


パーシステンスとインテグレーション

ツリー セルのインデントは、フィルタリング、並べ替え、ページングなど他のツリーグリッド全体の機能で永続化されます。

  • sortingが列に適用された際にデータ行がレベルごとに並べ替えられます。ルートレベルの行はそれぞれの子に関係なく個々に並べ替えられます。各子コレクションは個々に並べ替えられます。
  • 最初の列 visibleIndex は、常にツリー列です。
  • 列ピン固定、列の非表示、列移動などの処理後に 0 の visibleIndex で終わる列はツリー列になります。

既知の問題と制限

制限 説明
ツリー セルのテンプレート化 ツリーセルをテンプレート化する場合、セルの境界外にスパンするコンテンツはオーバレイに配置しない限り表示されません。
集計 集計はツリーグリッドで現在サポートされておりません。
検索 API 検索 API はツリーグリッドで現在サポートされておりません。
エクスポート エクスポートはツリーグリッドで現在サポートされておりません。
グループ化 グループ化機能は、ツリーグリッドに継承されるためサポートされません。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。