Tree Grid ソートの概要

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

    Angular Tree Grid ソートの例

    更に igx-tree-gridcontextMenu 出力を使用してソートにカスタム contextmenu が追加されます。

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

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

    ソート インジケーター

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

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

    API を使用したソート

    Tree Grid sort メソッドを使用して列、複数の列の組み合わせをソートできます。

    import { SortingDirection } from 'igniteui-angular';
    
    // Perform a case insensitive ascending sort on the ProductName column.
    this.treeGrid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true });
    
    // Perform sorting on both the ProductName and Price columns.
    this.treeGrid.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.treeGrid.clearSort('ProductName');
    
    // Removes the sorting state from every column in the Tree Grid
    this.treeGrid.clearSort();
    
    Note

    Tree GridsortStrategycolumnsortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。

    Note

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

    初期のソート状態

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

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

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

    スタイル設定

    ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

    @import '~igniteui-angular/lib/core/styles/themes/index';
    

    最も単純なアプローチに従って、igx-grid-theme を拡張し、$sorted-header-icon-color and sortable-header-icon-hover-color パラメーターを受け取ります。

    $custom-theme: igx-grid-theme(
        $sorted-header-icon-color: #ffb06a,
        $sortable-header-icon-hover-color: black
    );
    

    最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを含めることです。

     @include igx-grid($custom-theme);
    
    Note

    コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。

    :host {
       ::ng-deep {
           @include igx-grid($custom-theme);
       }
    }
    

    カラーパレットの定義

    上記のように色の値をハードコーディングする代わりに、igx-paletteigx-color 関数を使用することによって色に関してより高い柔軟性を持つことができます。

    igx-palette は渡された一次色と二次色に基づいてカラーパレットを生成します。

    $black-color: black;
    $orange-color: #ffb06a;
    
    $custom-palette: igx-palette($primary: $black-color, $secondary: $orange-color);
    

    次に igx-color を使用してパレットから簡単に色を取得できます。

    $custom-theme: igx-grid-theme(
        $sorted-header-icon-color: igx-color($custom-palette, "secondary", 500),
        $sortable-header-icon-hover-color: igx-color($custom-palette, "primary", 500)
    );
    
    Note

    igx-colorigx-palette は色の生成や取得のための関数です。使い方の詳細については パレット のトピックをご覧ください。

    スキーマの使用

    テーマ エンジンを使用してスキーマの利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。

    すべてのコンポーネントに提供されている 2 つの定義済みスキーマ (ここでは _light-grid) の 1 つを拡張します。

    // Extending the light grid schema
    $custom-grid-schema: extend($_light-grid,
        (
            sorted-header-icon-color: (igx-color:('secondary', 500)),
            sortable-header-icon-hover-color: (igx-color:('primary', 500))
        )
    );
    

    カスタム スキーマを適用するには、グローバル (light または dark) の 1 つを拡張する必要があります。これは基本的にカスタム スキーマでコンポーネントをポイントし、その後それぞれのコンポーネントテーマに追加するものです。

    // Extending the global light-schema
    $my-custom-schema: extend($light-schema, 
        (
            igx-grid: $custom-grid-schema
        )
    );
    
    // Defining our custom theme with the custom schema
    $custom-theme: igx-grid-theme(
      $palette: $custom-palette,
      $schema: $my-custom-schema
    );
    

    上記と同じ方法でテーマを含める必要があることに注意してください。

    デモ

    Note

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

    API リファレンス

    その他のリソース

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