Grid 並べ替え

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

デモ

更に igx-gridonContextMenu を使用して並べ替えにカスタム contextmenu が追加されます。


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

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

API での並べ替え

Grid sort メソッドを使用して列、複数の列の組み合わせを並べ替えできます。

import { SortingDirection } from 'igniteui-angular';

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

// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);
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

並べ替え操作で Grid の基になるデータ ソースは変更しません

初期の並べ替え状態

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

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

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

リモート並べ替え

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

API リファレンス

その他のリソース

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