Angular Hierarchical Grid ページネーション

ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザーエクスペリエンスとデータ操作が向上します。Hierarchical Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッドツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Hierarchical Grid のページネーションはカスタムページのテンプレートをサポートします。

Angular ページネーションの例

次の例は、Hierarchical Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Hierarchical Grid ページをすばやくナビゲートすることもできます。

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

igx-paginator コンポーネントを追加すると、機能が存在するかどうかが制御されます。トグルプロパティを持つ単純な *ngIf を使用して、機能を有効/無効にできます。perPage 入力は、ページごとに表示されるレコードを制御します。以下のように Hierarchical Grid でページングを有効にします。

<igx-hierarchical-grid #hierarchicalGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-hierarchical-grid>
html

例:

<igx-paginator #paginator [totalRecords]="20">
    <igx-paginator-content>
        <div id="numberPager" style="justify-content: center;">
            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
                PREV
            </button>
            <span>
               Page {{paginator.page}} of {{paginator.totalPages}}
            </span>
            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
                NEXT
            </button>
        </div>
    </igx-paginator-content>
</igx-paginator>
html

使用方法

以下の例では、igx-paginator コンポーネントは igx-hierarchical-grid コンポーネントとともに使用されますが、ページング機能が必要な場合は、他のコンポーネントとともに使用できます。

<igx-hierarchical-grid>
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>
html

子グリッド内のページネーター設定

IgxHierarchicalGrid の子グリッドの実装方法および DI スコープの動作には一定の制限があるため、igx-row-island タグ内でページネーターコンポーネントを定義する場合、ページネーター自体で IgxPaginator ディレクティブを必ず使用してください。これにより、子グリッドが参照として正しいページネーターインスタンスを持つようになります。

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        ...
        <igx-grid-toolbar *igxPaginator>
           ...
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>
html

ページネーターコンポーネントのデモ

リモートページング

リモートページングは、データ取得を担当するサービスと、グリッドの構築とデータサブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Hierarchical Grid リモートデータ操作トピックをご覧ください。

スタイル設定

ページネーターのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も簡単な方法で paginator-theme を拡張し $text-color、$background-color および $border-color パラメータを受け入れる新しいテーマを作成します。

$dark-paginator: paginator-theme(
  $text-color: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);
scss

paginator-theme はページングコンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコンボタンテーマを作成しましょう。

$dark-button: icon-button-theme(
  $foreground: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);
scss

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

最後にそれぞれのテーマを持つコンポーネントミックスインを含めることです。

@include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
scss

作成した icon-button-theme を .igx-paginator__pager 内に含めて、ページネーターボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコンボタンも影響を受けます。

コンポーネントが Emulated ViewEncapsulation を使用している場合、ボタンのようにページングコンテナー内にあるコンポーネントのスタイルを設定するには、::ng-deep を使用してこのカプセル化を解除する必要があります。

@include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}
scss

デモ

API リファレンス

その他のリソース

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