Angular Tree Grid ページネーション

    ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。 Tree Grid ページネーションは、列の追加と同様に、igx-paginator タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular Material テーブルと同様に、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%'" [displayDensity]="'cosy'">
        <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" [displayDensity]="treeGrid.displayDensity">
        </igx-paginator>
    </igx-tree-grid>
    

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

    リモート ページング

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

    Angular のページネーション スタイリング

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

    // custom-grid-paging-style.component.scss
    @import '~igniteui-angular/lib/core/styles/themes/index';
    

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

    $dark-paginator: igx-paginator-theme(
        $text-color: #F4D45C,
        $background-color: #575757,
        $border-color: #292826
    );
    

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

    $dark-button: igx-button-theme(
        $icon-color: #FFCD0F,
        $icon-hover-color: #292826,
        $icon-hover-background: #FFCD0F,
        $icon-focus-color: #292826,
        $icon-focus-background: #FFCD0F,
        $disabled-color: #16130C
    );
    

    この例では、アイコンの色と背景、ボタンの無効な色のみを変更しましたが、igx-button-theme ではボタン スタイルを制御するためのパラメータを増やすことができます。

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

    @include igx-grid-paginator($dark-grid-paginator);
    .igx-grid-paginator__pager {
        @include igx-button($dark-button);
    }
    
    Note

    igx-button ミックスインを .igx-paginator__pager 内でスコープして、ページネーター ボタンのみにスタイルが設定されるようにします。そうでない場合は、グリッド内の他のボタンも影響を受けます。

    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

    :host {
        ::ng-deep {
            @include igx-paginator($dark-paginator);
            .igx-paginator__pager {
                @include igx-button($dark-button);
            }
        }
    }
    

    カラー パレットの定義

    上記のように色の値をハードコーディングする代わりに、igx-palette および igx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $yellow-color: #F9D342;
    $black-color: #292826;
    
    $dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);
    

    igx-color を使用してパレットから簡単に色を取り出すことができます。

    $dark-paginator: igx-paginator-theme(
        $palette: $dark-palette,
        $text-color: igx-color($dark-palette, "secondary", 400),
        $background-color: igx-color($dark-palette, "primary", 200),
        $border-color:  igx-color($dark-palette, "primary", 500)
    );
    
    $dark-button: igx-button-theme(
        $palette: $dark-palette,
        $icon-color: igx-color($dark-palette, "secondary", 700),
        $icon-hover-color: igx-color($dark-palette, "primary", 500),
        $icon-hover-background: igx-color($dark-palette, "secondary", 500),
        $icon-focus-color: igx-color($dark-palette, "primary", 500),
        $icon-focus-background: igx-color($dark-palette, "secondary", 500),
        $disabled-color: igx-color($dark-palette, "primary", 700)
    );
    
    Note

    igx-color および igx-palette は、色を生成および取得するための重要な機能です。使い方の詳細についてはパレットのトピックを参照してください。

    スキーマの使用

    テーマ エンジンには スキーマを使用できる利点があり、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用するための方法です。

    すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (この場合は (dark-paginationdark-button スキーマ) の 1 つを拡張します。

    // Extending the dark paginator schema
    $dark-paginator-schema: extend($_dark-pagination,
            (
                text-color:(
                    igx-color: ("secondary", 400)
                ),
                background-color:(
                    igx-color: ("primary", 200)
                ),
                border-color:(
                    igx-color:( "primary", 500)
                )
            )
    );
    // Extending the dark button schema
    $dark-button-schema: extend($_dark-button,
            (
                icon-color:(
                    igx-color:("secondary", 700)
                ),
                icon-hover-color:(
                    igx-color:("primary", 500)
                ),
                icon-hover-background:(
                    igx-color:("secondary", 500)
                ),
                icon-focus-color:(
                    igx-color:("primary", 500)
                ),
                icon-focus-background:(
                    igx-color:("secondary", 500)
                ),
                disabled-color:(
                    igx-color:("primary", 700)
                )
            )
    );
    

    カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントを指し示し、その後それぞれのコンポーネント テーマに追加する方法です。

    // Extending the global dark-schema
    $custom-dark-schema: extend($dark-schema,(
        igx-paginator: $dark-paginator-schema,
        igx-button: $dark-button-schema
    ));
    
    // Defining igx-paginator-theme with the global dark schema
    $dark-paginator: igx-paginator-theme(
      $palette: $dark-palette,
      $schema: $custom-dark-schema
    );
    
    // Defining button-theme with the global dark schema
    $dark-button: igx-button-theme(
      $palette: $dark-palette,
      $schema: $custom-dark-schema
    );
    

    テーマを上記と同じ方法で含める必要があることに注意してください。

    デモ

    API リファレンス

    その他のリソース

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