Angular Tree Grid のソート

Ignite UI for Angular Tree Grid では、列レベルでのデータ ソートが可能です。つまり、igx-tree-grid にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Angular Tree Grid ソートの例

更に igx-tree-grid の contextMenu 出力を使用してソートにカスタム コンテキスト メニューが追加されます。

EXAMPLE

MODULES

TS

HTML

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,
	IgxIconModule
 } from "igniteui-angular";
import { TreeGridSortingSampleComponent } from "./tree-grid-sorting-sample/tree-grid-sorting-sample.component";
import { TreeGridContextmenuComponent } from "./tree-grid-sorting-sample/tree-grid-contextmenu/tree-grid-contextmenu.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridSortingSampleComponent,
	TreeGridContextmenuComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

export class TreeGridSortingSampleComponent implements OnInit {
    @ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true })
    public treegrid1: IgxTreeGridComponent;
    public data: any[];
    public contextmenu = false;
    public contextmenuX = 0;
    public contextmenuY = 0;
    public clickedCell = null;
    public sortingTypes: ISortingOptions[] = [
        {
            mode: 'single'
        }, {
            mode: 'multiple'
        }
    ];
    public sortingOptions: ISortingOptions = this.sortingTypes[1];

    constructor() { }

    public ngOnInit(): void {
        this.data = FOODS_DATA();
        this.treegrid1.sortingExpressions = [
            { dir: SortingDirection.Asc, fieldName: 'UnitPrice',
              ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
        ];
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public rightClick(eventArgs) {
      eventArgs.event.preventDefault();
      this.contextmenuX = eventArgs.event.clientX;
      this.contextmenuY = eventArgs.event.clientY;
      this.contextmenu = true;
      this.clickedCell = eventArgs.cell;
    }

    public disableContextMenu() {
      this.contextmenu = false;
    }

    handleSearchResults(event: KeyboardEvent) {
        event.preventDefault();
    }
}
tsコピー

<div class="grid__wrapper" (window:click)="disableContextMenu()">
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
        primaryKey="ID" foreignKey="ParentID" (contextMenu)="rightClick($event)" [sortingOptions]="sortingOptions">
        <igx-grid-toolbar>
            <button class="button-opitions" igxButton="raised" (click)="treegrid1.sortingExpressions = []">
                Clear Sorting
            </button>

            <button class="button-opitions" igxButton="raised" (click)="groupArea.expressions = []">
                Clear Grouped columns
            </button>
            <igx-grid-toolbar-actions>
                <igx-simple-combo #comboItem
                    [data]="sortingTypes"
                    [displayKey]="'mode'"
                    [(ngModel)]="sortingOptions"
                    (keydown)="handleSearchResults($event)">
                    <ng-template igxComboClearIcon></ng-template>
                    <ng-template igxComboItem let-item>
                        <div>{{ item.mode | uppercase }}</div>
                    </ng-template>
                </igx-simple-combo>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>

        <igx-tree-grid-group-by-area
            #groupArea
            [grid]="treegrid1"
            [hideGroupedColumns]="true">
        </igx-tree-grid-group-by-area>

        <igx-column field="ID" header="Product ID" [groupable]="true" [sortable]="true">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'" [groupable]="true" [sortable]="true">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" dataType="number" [groupable]="true" [sortable]="true">
            <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'" [formatter]="formatDate" [groupable]="true" [sortable]="true">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true" [sortable]="true">
            <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 *ngIf="contextmenu">
        <app-tree-grid-contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell"></app-tree-grid-contextmenu>
    </div>
</div>
htmlコピー

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

.igx-grid-toolbar ::ng-deep {
    .igx-grid-toolbar__custom-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

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

sortable 入力で可能です。Tree Grid のソートで、sortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

<igx-column field="Name" header="Order Product" [dataType]="'string'" sortable="true"></igx-column>
html

ソート インジケーター

ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。

IgxTreeGrid は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。

API を使用したソート

Tree Grid sort メソッドを使用して列、複数の列の組み合わせをソートできます。

import { SortingDirection } from 'igniteui-angular';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

// Perform a case insensitive ascending sort on the ProductName column.
this.treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.treeGrid.sort([
    { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'UnitPrice', dir: SortingDirection.Desc }
]);
typescript

Sorting は、DefaultSortingStrategy アルゴリズムを使用して実行されます。IgxColumnComponent または ISortingExpression は、代替アルゴリズムとして ISortingStrategy のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。

フィルター動作で、ソート状態をクリアするには clearSort メソッドを使用します。

// Removes the sorting state from the ProductName column
this.treeGrid.clearSort('Name');

// Removes the sorting state from every column in the Tree Grid
this.treeGrid.clearSort();
typescript

Tree Grid の sortStrategy は column の sortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。

ソート操作で Tree Grid の基になるデータ ソースは変更しません。

初期のソート状態

Tree Grid でソート状態を初期設定するには、ソート式の配列を Tree Grid の sortingExpressions プロパティに渡します。

public ngAfterViewInit(): void {
    this.treeGrid.sortingExpressions = [
        { 
            dir: SortingDirection.Asc, fieldName: 'UnitPrice',
            ignoreCase: true, strategy: DefaultSortingStrategy.instance() 
        }
    ];
}
typescript

string 型の値が dataType Date の列で使用される場合、Tree Grid が値を Date オブジェクトに解析しないため iTree Grid sorting が正しく動作しません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。

ソート インジケーのターテンプレート

列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。以下のディレクティブは、ソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。

• IgxSortHeaderIconDirective – ソートが適用されない場合にソート アイコンを再テンプレート化します。

<ng-template igxSortHeaderIcon>
    <igx-icon>unfold_more</igx-icon>
</ng-template>
html

• IgxSortAscendingHeaderIconDirective – 列が昇順にソートされたときにソート アイコンを再テンプレート化します。

<ng-template igxSortAscendingHeaderIcon>
    <igx-icon>expand_less</igx-icon>
</ng-template>
html

• IgxSortDescendningHeaderIconDirective – 列が降順でソートされたときにソート アイコンを再テンプレート化します。

<ng-template igxSortDescendingHeaderIcon>
    <igx-icon>expand_more</igx-icon>
</ng-template>
html

スタイル設定

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

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

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

最も単純なアプローチに従って、grid-theme を拡張し、$sorted-header-icon-color および sortable-header-icon-hover-color パラメーターを受け取ります。

$custom-theme: grid-theme(
  $sorted-header-icon-color: #ffb06a,
  $sortable-header-icon-hover-color: black
);
scss

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

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

@include css-vars($custom-theme);
scss

デモ

EXAMPLE

MODULES

TS

HTML

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,
	IgxIconModule
 } from "igniteui-angular";
import { TreeGridSortingStylingComponent } from "./tree-grid-sorting-styling/tree-grid-sorting-styling.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridSortingStylingComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

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

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

    constructor() {
    }
    public ngOnInit(): void {
        this.data = FOODS_DATA();
        this.treegrid1.sortingExpressions = [
            { dir: SortingDirection.Asc, fieldName: 'UnitPrice',
              ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
        ];
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

}
tsコピー

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treegrid1 [data]="data" [autoGenerate]="false" height="500px" width="100%" primaryKey="ID"
        foreignKey="ParentID">
        <igx-column field="ID" header="Product ID" [sortable]="true">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'" [sortable]="true">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" dataType="number" [sortable]="true">
            <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'" [formatter]="formatDate"
            [sortable]="true">
        </igx-column>
        <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true">
            <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 *;

$custom-theme: grid-theme(
    $sorted-header-icon-color: #ffb06a,
    $sortable-header-icon-hover-color: black
);

:host ::ng-deep {
	@include css-vars($custom-theme);
}

.grid__wrapper {
    margin: 16px;
}
scssコピー

Edit in: CodesandboxStackBlitz

このサンプルは、Change Theme (テーマの変更) から選択したグローバル テーマに影響を受けません。

API リファレンス

• IgxTreeGridComponent API
• IgxTreeGridComponent スタイル
• ISortingExpression

その他のリソース

• Tree Grid 概要
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• 集計
• 列移動
• 列のピン固定
• 列のサイズ変更
• 選択

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)