Web Components Tree Grid ソート

    Web Components Tree Grid の Ignite UI for Web Components データ ソート機能は列ごとのレベルで有効になっています。つまり、IgcTreeGridComponent にはソート可能な列とソート不可能な列を混在させることができます。Web Components でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。

    Web Components Tree Grid ソート概要の例

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    以下のように sortable 入力を使用します。IgcTreeGridComponent のソートで、sortingIgnoreCase プロパティを設定して大文字と小文字を区別するソートができます。

    <igc-column field="ProductName" header="Product Name" data-type="string" sortable="true"></igc-column>
html

    ソート インジケーター

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

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    API でのソート

    IgcTreeGridComponent sort メソッドを使用し、列または複数の列を IgcTreeGridComponent API でソートできます。

    import { SortingDirection } from 'igniteui-webcomponents-grids';
typescript
    
// Perform a case insensitive ascending sort on the Category column.
this.treeGrid.sort([{ fieldName: 'Category', dir: SortingDirection.Asc, ignoreCase: true }]);

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

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

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

    // Removes the sorting state from the Category column
this.treeGrid.clearSort('Category');

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

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

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

    初期のソート状態

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

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

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

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

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

    • sortHeaderIconTemplate – ソートが適用されない場合にソート アイコンを再テンプレート化します。
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.sortHeaderIconTemplate = this.sortHeaderIconTemplate;
}

public sortHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
    return html`<igc-icon name="unfold_more"></igc-icon>`;
}
ts
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.sortAscendingHeaderIconTemplate = this.sortAscendingHeaderIconTemplate;
}

public sortAscendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
    return html`<igc-icon name="expand_less"></igc-icon>`;
}
ts
    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.sortDescendingHeaderIconTemplate = this.sortDescendingHeaderIconTemplate;
}

public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => {
    return html`<igc-icon name="expand_more"></igc-icon>`;
}
ts

    スタイル設定

    定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。

    <igc-tree-grid class="grid">
</igc-tree-grid>
html

    次に、そのクラスに関連する CSS プロパティを設定します。

    .grid {
    --ig-grid-sorted-header-icon-color: #ffb06a;
    --ig-grid-sortable-header-icon-hover-color: black;
}
css

    デモ

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    API リファレンス

    その他のリソース

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