Tree Grid (ツリー グリッド) ロードオンデマンド

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

    Web Components Tree Grid ロードオンデマンド例

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    使用方法

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

    <igc-tree-grid id="treeGrid"></igc-tree-grid>
html
    constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
    this.getData(parentID, (children) => done(children));
    };
}
ts

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

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

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

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

    <igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" has-children-key="hasEmployees"></igc-tree-grid>
html

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

    独自のカスタム ロード インジケーターを提供する場合は、RowLoadingIndicatorTemplate オプションを使用してカスタム テンプレートを設定できます。以下のコードは設定方法を示します:

    constructor() {
    var treeGrid = document.getElementById("treeGrid") as IgcTreeGridComponent;
    treeGrid.data = this.employeesFlatData;
    treeGrid.rowLoadingIndicatorTemplate = this.rowLoadingTemplate;
    treeGrid.loadChildrenOnDemand = (parentID: any, done: (children: any[]) => void) => {
               this.getData(parentID, (children) => done(children));
    };

}
public rowLoadingTemplate() {
    return html`<igc-icon name="loop" collection="material"></igc-icon>`;
}
ts

    API リファレンス

    Ignite UI for Web Components | CTA Banner

    その他のリソース

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