Angular Hierarchical Grid ページネーション
ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。Hierarchical Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Hierarchical Grid のページネーションはカスタム ページのテンプレートをサポートします。
Angular ページネーションの例
次の例は、Hierarchical Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Hierarchical Grid ページをすばやくナビゲートすることもできます。
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>例:
<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>使用方法
以下の例では、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>子グリッド内のページネーター設定
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>ページネーター コンポーネントのデモ
リモート ページング
リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Hierarchical Grid リモート データ操作トピックをご覧ください。
スタイル設定
ページネーターのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';最も簡単な方法で paginator-theme を拡張し $foreground、$background、$border-color および $accent-color パラメータを受け入れる新しいテーマを作成します。
$paginator-theme: paginator-theme(
$foreground: #ff570f,
$background: #130425FF,
$border-color: #ff570f,
$accent-color: #ff570f,
);新しく作成したテーマを含めることができます。
igx-paginator {
@include tokens($paginator-theme);
}デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。