ツリー グリッド ロードオンデマンド

    Ignite UI for Angular IgxTreeGrid は、サーバーから最小限のデータのみ取得してレンダリングされるため、ユーザーにすばやくデータを表示できます。その後、ユーザーが行を展開した後にのみ、その特定の親行の子がロードされます。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。

    Angular ツリー グリッド ロードオンデマンドの例

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    使用方法

    ロードオンデマンド機能は、ツリーグリッド データソースの両方のタイプ (プライマリと外部キー、または子コレクション) と互換性があります。ツリー グリッドにルート レベルのデータをロードし、いずれかのデータソース タイプに必要なキーを指定するだけです。ツリーグリッドは、ユーザーが行を展開したときに子行をロードするためのコールバック入力プロパティ loadChildrenOnDemand を提供します。

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren">
        ...
</igx-tree-grid>
html

    loadChildrenOnDemand コールバックは、2 つのパラメーターを提供します。

    • parentID - 展開されている親行の ID。
    • done - 子がサーバーから取得されたときに子と共に呼び出されるコールバック。
    public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    this.dataService.getData(parentID, (children) => done(children));
}
typescript

    ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。done コールバックが呼び出されると、ロード インジケーターが消え、子が読み込まれます。ツリーグリッドは子を基になるデータソースに追加し、必要なキーを自動的に設定します。

    行がその展開前に子を持つかどうかについての情報を提供する方法がある場合は、hasChildrenKey 入力プロパティを使用できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。

    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
        [loadChildrenOnDemand]="loadChildren" hasChildrenKey="hasEmployees">
        ...
</igx-tree-grid>
html

    hasChildrenKey プロパティを設定する必要はありません。指定しなかった場合は、各行に展開インジケーターが表示されます。子を持たない行を展開した後も、未定義または空の配列で done コールバックを呼び出す必要があります。この場合、ロード インジケーターが消えた後に展開ンジケータは表示されません。

    カスタムの読み込みインジケーターを提供したい場合は、ng-template を作成し、それに igxRowLoadingIndicator ディレクティブを使用してマークを付けます。以下のコード スニペットはカスタム テンプレートを定義する方法を示します。

    <igx-tree-grid ...>

    ...

    <ng-template igxRowLoadingIndicator>
        <igx-icon fontSet="material">loop</igx-icon>
    </ng-template>
</igx-tree-grid>
html

    API リファレンス

    その他のリソース

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