Angular Hierarchical Grid のソート

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

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

    Angular Hierarchical Grid ソートの例

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

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

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

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

    ソート インジケーター

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

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

    API を使用したソート

    Hierarchical 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.hierarchicalGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true });

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

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

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

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

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

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

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

    初期のソート状態

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

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

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

    App Builder | CTA Banner

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

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

    • 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
    Edit in:

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

    API リファレンス

    その他のリソース

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