Components List

Angular Tree Grid ページネーション

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

Angular ページネーションの例

次の例は、Tree Grid ページネーションを表しており、items per page のオプションの使用法と、ページングを有効にする方法を示しています。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して、Tree Grid ページをすばやくナビゲートすることもできます。

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { 
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
 } from "igniteui-angular";
import { TreeGridPagingSampleComponent } from "./tree-grid-paging-sample/tree-grid-paging-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridPagingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-tree-grid-paging-sample',
    styleUrls: ['./tree-grid-paging-sample.component.scss'],
    templateUrl: 'tree-grid-paging-sample.component.html'
})

export class TreeGridPagingSampleComponent implements OnInit {
    @ViewChild('treegrid1', { static: true }) public grid1: IgxTreeGridComponent;
    public data: any[];

    public ngOnInit(): void {
        this.data = FOODS_DATA();
    }
}
ts

<div class="grid__wrapper">

    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="500px" width="100%"
        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column field="ID" header="Product ID" [dataType]="'string'">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" dataType="number">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <span *ngIf="cell.row.data.UnitPrice !== 0">${{val}}</span>
            </ng-template>
        </igx-column>
        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <img *ngIf="cell.row.data.UnitPrice !== 0 && val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png"
                    title="Continued" alt="Continued" />
                <img *ngIf="cell.row.data.UnitPrice !== 0 && !val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png"
                    title="Discontinued" alt="Discontinued" />
            </ng-template>
        </igx-column>
    </igx-tree-grid>
</div>
html

@use '../../variables' as *;

$progressBar-sample-theme: progress-linear-theme(
    $track-color: rgba(181,181,181, .5),
    $fill-color-default: orange
);

.grid__wrapper {
    @include progress-linear($progressBar-sample-theme);
    margin: 0 16px;
    padding-top: 10px;
}

.cell__inner,
.cell__inner_2 {
    display: flex;
    align-items: center;
    height: 100%;
}

.cell__inner {
    position: relative;
    justify-content: space-between;
}

.linear-bar-container {
    width: 100%;
}
scss

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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>
html

例:

<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>
html

使用方法

以下の例では、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>
html

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

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { 
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule,
	IgxSwitchModule
 } from "igniteui-angular";
import { TreeGridPagerSampleComponent } from "./tree-grid-pager-sample/tree-grid-pager-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridPagerSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule,
	IgxSwitchModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { IPaginatorResourceStrings, IgxPaginatorComponent } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    selector: 'app-tree-grid-pager-sample',
    styleUrls: ['./tree-grid-pager-sample.component.scss'],
    templateUrl: './tree-grid-pager-sample.component.html'
})
export class TreeGridPagerSampleComponent implements OnInit, AfterViewInit {
    @ViewChild('paginator', { read: IgxPaginatorComponent, static: false })
    paginator: IgxPaginatorComponent;

    public data: any[];
    public densityOptions: string[];
    public isDropdownHidden = false;
    public isPagerHidden = false;
    public selectOptions = [5, 15, 20, 50];

    private paginatorResourceStrings: IPaginatorResourceStrings = {
        // eslint-disable-next-line @typescript-eslint/naming-convention
        igx_paginator_label: 'Records per page'
    };

    public ngOnInit(): void {
        this.data = FOODS_DATA();
        this.densityOptions = ['compact', 'cosy', 'comfortable'];
    }

    public ngAfterViewInit(): void {
        requestAnimationFrame(() => {
            this.paginator.resourceStrings = this.paginatorResourceStrings;
        });
    }
}
ts

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true" #treegrid1 [data]="data" [perPage]="10" height="500px" width="100%"
        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
        <igx-paginator #paginator [(page)]="treegrid1.page" [totalRecords]="treegrid1.totalRecords"
            [(perPage)]="treegrid1.perPage" [selectOptions]="selectOptions" [displayDensity]="treegrid1.displayDensity">
            <igx-paginator-content>
                <igx-page-size *ngIf="!isDropdownHidden"></igx-page-size>
                <igx-page-nav *ngIf="!isPagerHidden"></igx-page-nav>
            </igx-paginator-content>
        </igx-paginator>
        <igx-column field="ID" header="Product ID" [dataType]="'string'">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <span *ngIf="cell.row.data.UnitPrice !== 0">${{val}}</span>
            </ng-template>
        </igx-column>
        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <img *ngIf="cell.row.data.UnitPrice !== 0 && val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png" title="Continued"
                    alt="Continued" />
                <img *ngIf="cell.row.data.UnitPrice !== 0 && !val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png"
                    title="Discontinued" alt="Discontinued" />
            </ng-template>
        </igx-column>
    </igx-tree-grid>



    <div class="options-container">
        <label>Display density:</label>
        <div class="select-input">
            <igx-select [(ngModel)]="treegrid1.displayDensity">
                <igx-select-item *ngFor="let density of densityOptions" [value]="density">
                    {{ density }}
                </igx-select-item>
            </igx-select>
        </div>
        <igx-switch [(ngModel)]="isDropdownHidden">Hide Dropdown</igx-switch>
        <igx-switch [(ngModel)]="isPagerHidden">Hide Pager</igx-switch>
    </div>
</div>
html

.grid__wrapper {
    margin: 0 16px;
    padding-top: 10px;
}

igx-switch {
    margin: 24px;
} 

.options-container {
    display: flex; 
    flex-direction: row; 
    align-items: baseline; 
    padding: 0 1rem;
}
.options_container * { margin-right: 15px; }

.select-input {
    max-width: 150px; 
    padding-top: 5px; 
    padding-bottom: 5px;
    margin-left: 15px;
}
scss

リモートページング

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

スタイル設定

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

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

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

$dark-paginator: paginator-theme(
  $text-color: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);
scss

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

$dark-button: icon-button-theme(
  $foreground: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);
scss

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

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

@include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
scss

作成した icon-button-theme を .igx-paginator__pager 内に含めて、ページネーターボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコンボタンも影響を受けます。

コンポーネントが Emulated ViewEncapsulation を使用している場合、ボタンのようにページングコンテナー内にあるコンポーネントのスタイルを設定するには、::ng-deep を使用してこのカプセル化を解除する必要があります。

@include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}
scss

デモ

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { 
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
 } from "igniteui-angular";
import { TreeGridPagingStyleSampleComponent } from "./tree-grid-paging-style/tree-grid-paging-style-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridPagingStyleSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxButtonModule,
	IgxRippleModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit } from '@angular/core';
import { FOODS_DATA } from '../data/foods';

@Component({
    selector: 'app-tree-grid-paging-sample',
    styleUrls: ['./tree-grid-paging-style-sample.component.scss'],
    templateUrl: 'tree-grid-paging-style-sample.component.html'
})

export class TreeGridPagingStyleSampleComponent implements OnInit {

    public data: any[];

    public ngOnInit(): void {
        this.data = FOODS_DATA();
    }
}
ts

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" height="520px" width="100%"
        displayDensity="cosy" primaryKey="ID" foreignKey="ParentID">
        <igx-paginator [perPage]="10"></igx-paginator>
        <igx-column field="ID" header="Product ID" [dataType]="'string'">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" dataType="number">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <span *ngIf="cell.row.data.UnitPrice !== 0">${{val}}</span>
            </ng-template>
        </igx-column>
        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'">
            <ng-template igxCell let-cell="cell" let-val>
                <span *ngIf="cell.row.data.UnitPrice === 0">-</span>
                <img *ngIf="cell.row.data.UnitPrice !== 0 && val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/active.png"
                    title="Continued" alt="Continued" />
                <img *ngIf="cell.row.data.UnitPrice !== 0 && !val" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid/expired.png"
                    title="Discontinued" alt="Discontinued" />
            </ng-template>
        </igx-column>
    </igx-tree-grid>
</div>
html

@use '../../variables' as *;

.grid__wrapper {
    margin: 0 16px;
    padding-top: 10px;
}

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

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

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

API リファレンス

その他のリソース

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