Angular Tree Grid のソート
Ignite UI for Angular Tree Grid では、列レベルでのデータ ソートが可能です。つまり、igx-tree-grid にソート可能な列とソート不可の列の両方を持つことができます。Angular でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
Note
これまで、グループ化 / ソートは互いに連携して機能していました。13.2 バージョンでは、グループ化をソートから切り離す新しい動作が導入されています。たとえば、グループ化をクリアしても、グリッド内のソート式はクリアされません。その逆も同様です。それでも、列がソートおよびグループ化されている場合は、グループ化された式が優先されます。
Angular Tree Grid ソートの例
更に igx-tree-grid の contextMenu
出力を使用してソートにカスタム コンテキスト メニューが追加されます。
sortable
入力で可能です。Tree Grid のソートで、sortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<igx-column field="Name" header="Order Product" [dataType]="'string'" sortable="true"></igx-column>
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
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 }
]);
Note
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();
Note
Tree Grid の sortStrategy
は column の sortStrategy
と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
Note
ソート操作で Tree Grid の基になるデータ ソースは変更しません。
初期のソート状態
Tree Grid でソート状態を初期設定するには、ソート式の配列を Tree Grid の sortingExpressions
プロパティに渡します。
public ngAfterViewInit(): void {
this.treeGrid.sortingExpressions = [
{
dir: SortingDirection.Asc, fieldName: 'UnitPrice',
ignoreCase: true, strategy: DefaultSortingStrategy.instance()
}
];
}
Note
string
型の値が dataType
Date
の列で使用される場合、Tree Grid が値を Date
オブジェクトに解析しないため iTree Grid sorting
が正しく動作しません。string
オブジェクトを使用する場合、値を Date
オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
ソート インジケーのターテンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。以下のディレクティブは、ソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
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
(テーマの変更) から選択したグローバル テーマに影響を受けません。