Blazor Tree Grid ページネーションの概要

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

Blazor Tree Grid ページネーションの例

次の例は IgbTreeGrid のページネーションを表し、ページごとの項目のオプションの使用法とページングを有効にする方法を公開します。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して IgbTreeGrid ページをすばやく移動することもできます。

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgbTreeGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbTreeGrid>

使用方法

以下の例では、IgbPaginator コンポーネントを IgbTreeGrid コンポーネントと一緒に使用していますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。

<IgbTreeGrid @ref=grid Data=Data className="gridSize">
    <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
    </IgbPaginator>
</IgbTreeGrid>

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

API リファレンス

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub