Angular Grid のソート
Ignite UI for Angular Grid では、列レベルでのデータ ソートが可能です。つまり、igx-grid にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
Note
これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。
Angular Grid ソートの例
sortable
入力で可能です。Grid のソートで、sortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<igx-column field="ProductName" header="Product Name" [dataType]="'string'" sortable="true"></igx-column>
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
IgxGrid は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
API を使用したソート
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.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 の sortStrategy
は column の sortStrategy
と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
Note
ソート操作で Grid の基になるデータ ソースは変更しません。
初期のソート状態
Grid でソート状態を初期設定するには、ソート式の配列を Grid の sortingExpressions
プロパティに渡します。
public ngAfterViewInit(): void {
this.grid.sortingExpressions = [
{
dir: SortingDirection.Asc, fieldName: 'CategoryName',
ignoreCase: true, strategy: DefaultSortingStrategy.instance()
}
];
}
Note
string
型の値が dataType
Date
の列で使用される場合、Grid が値を Date
オブジェクトに解析しないため iGrid sorting
が正しく動作しません。string
オブジェクトを使用する場合、値を Date
オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
リモート ソート
Grid はリモート ソートをサポートします。詳細については、Grid リモート データ操作
で説明されています。
ソート インジケーのターテンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。以下のディレクティブは、ソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
IgxSortHeaderIconDirective
– ソートが適用されない場合にソート アイコンを再テンプレート化します。
<ng-template igxSortHeaderIcon>
<igx-icon>unfold_more</igx-icon>
</ng-template>
IgxSortAscendingHeaderIconDirective
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
<ng-template igxSortAscendingHeaderIcon>
<igx-icon>expand_less</igx-icon>
</ng-template>
IgxSortDescendningHeaderIconDirective
– 列が降順でソートされたときにソート アイコンを再テンプレート化します。
<ng-template igxSortDescendingHeaderIcon>
<igx-icon>expand_more</igx-icon>
</ng-template>
スタイル設定
ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
最も単純なアプローチに従って、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
);
Note
上記のようにカラーの値をハードコーディングする代わりに、palette
および color
関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレット
のトピックをご覧ください。
最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。
@include css-vars($custom-theme);
デモ
Note
このサンプルは、Change Theme
(テーマの変更) から選択したグローバル テーマに影響を受けません。