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 を拡張し $text-color、$background-color および $border-color パラメータを受け入れる新しいテーマを作成します。
$dark-paginator: paginator-theme(
$text-color: #d0ab23;,
$background-color: #231c2c,
$border-color: #d0ab23;
);paginator-theme はページング コンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコン ボタン テーマを作成しましょう。
$dark-button: flat-icon-button-theme(
$foreground: #d0ab23,
$hover-foreground: #231c2c,
$hover-background: #d0ab23,
$focus-foreground: #231c2c,
$focus-background: #d0ab23,
$disabled-foreground: #9b7829
);最後にそれぞれのテーマを持つコンポーネント ミックスインを含めることです。
:host {
@include tokens($dark-paginator);
.igx-grid-paginator__pager {
@include tokens($dark-button);
}
}作成した icon-button-theme を .igx-paginator__pager 内に含めて、ページネーター ボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコン ボタンも影響を受けます。
コンポーネントが Emulated ViewEncapsulation を使用している場合、ボタンのようにページング コンテナー内にあるコンポーネントのスタイルを設定するには、::ng-deep を使用してこのカプセル化を解除する必要があります。
:host {
@include tokens($dark-paginator);
igx-paginator {
::ng-deep {
@include tokens($dark-button);
}
}
}デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。