グリッドの並べ替え

Ignite UI for Angular では、列レベルでの並べ替えが可能です。つまり、igx-grid に並べ替え可能な列および並べ替え不可の列の両方を含むことができます。

デモ

以下のデモは、igx-gridonContextMenu 出力を使用してカスタム コンテキスト メニューを追加しています。


以下のように sortable 入力を使用します。グリッド フィルター同様、sortingIgnoreCase プロパティを設定して大文字と小文字を区別する並べ替えを実行できます。

<igx-column field="ProductName" header="Product Name" dataType="'string'" sortable="true"></igx-column>

API での並べ替え

グリッドの sort メソッドを使用し、列または複数の列をグリッド API で並べ替えできます。

import { SortingDirection } from 'igniteui-angular';

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

// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc },
    { fieldName: 'Price', dir: SortingDirection.Desc, ignoreCase: false }
]);
Note

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

フィルター動作と同様に、並べ替え状態をクリアするには clearSort メソッドを使用します。

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

// Removes the sorting state from every column in the grid
this.grid.clearSort();
Note

並べ替え操作では、グリッドにバインドされているデータ ソースは変更されません

初期の並べ替え状態

グリッドの初期の並べ替え状態を設定するには、並べ替え式の配列をグリッドの sortingExpressions` プロパティに渡します。

public ngOnInit() {
    this.grid.sortingExpressions = [
        { fieldName: 'ProductName', dir: SortingDirection.Asc },
        { fieldName: 'Price', dir: SortingDirection.Desc, ignoreCase: false }
    ];
}
Note

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

リモート並べ替え

onDataPreLoadonSortingDone アウトプットにサブスクライブしてグリッドでリモートの並べ替えができます。詳細については、グリッドの仮想化とパフォーマンス ヘルプをご覧ください。

API

追加のリソース

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