Angular Tree Grid ページネーション
ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。Tree Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、Tree Grid のページネーションはカスタム ページのテンプレートをサポートします。
Angular ページネーションの例
次の例は、Tree Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Tree Grid ページをすばやくナビゲートすることもできます。
igx-paginator コンポーネントを追加すると、機能が存在するかどうかが制御されます。トグル プロパティを持つ単純な *ngIf を使用して、機能を有効/無効にできます。perPage 入力は、ページごとに表示されるレコードを制御します。以下のように Tree Grid でページングを有効にします。
<igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-tree-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-tree-grid コンポーネントと一緒に使用されていますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。
<igx-tree-grid #treeGrid [data]="data">
<igx-paginator #paginator [(page)]="treeGrid.page" [totalRecords]="treeGrid.length" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-tree-grid>ページネーター コンポーネントのデモ
リモート ページング
リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、Tree 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 リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。