Web Components 트리 그리드 정렬

    Web Components 트리 그리드의 Ignite UI for Web Components Data Sorting 기능은 열별 수준에서 사용하도록 설정되며, 이는 정렬 가능한 열과 정렬할 수 없는 열을 혼합할 수 있음을 의미합니다 IgcTreeGridComponent. Web Components 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.

    Web Components Tree Grid Sorting Overview Example

    이것은 입력을 sortable 통해 수행됩니다. 정렬을 통해 대소문자를 구분하는 정렬을 IgcTreeGridComponent 수행하도록 속성을 설정할 sortingIgnoreCase 수도 있습니다.

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

    Sorting Indicators

    정렬된 순서가 표시되지 않으면 일정량의 열이 정렬되어 있으면 정말 혼란스러울 수 있습니다.

    정렬 IgcTreeGridComponent 된 각 열의 인덱스를 표시하여 이 문제에 대한 솔루션을 제공합니다.

    Sorting through the API

    를 사용하여 API를 통해 IgcTreeGridComponent 열 또는 열 조합을 정렬할 수 있습니다. IgcTreeGridComponent sort 메서드:

    import { SortingDirection } from 'igniteui-webcomponents-grids';

    
// 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 }
]);

    [!Note] Sorting is performed using our DefaultSortingStrategy algorithm. Any IgcColumnComponent or ISortingExpression can use a custom implementation of the ISortingStrategy as a substitute algorithm. This is useful when custom sorting needs to be defined for complex template columns, or image columns, for example.

    필터링 동작과 마찬가지로 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();

    [!Note] The sortStrategy of the IgcTreeGridComponent is of different type compared to the sortStrategy of the IgcColumnComponent, since they work in different scopes and expose different parameters.

    [!Note] The sorting operation DOES NOT change the underlying data source of the IgcTreeGridComponent.

    Initial Sorting State

    정렬 표현식의 배열을 the IgcTreeGridComponent의 속성에 sortingExpressions 전달하여 의 IgcTreeGridComponent 초기 정렬 상태를 설정할 수 있습니다.

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

    [!Note] If values of type string are used by a column of dataType Date, the IgcTreeGridComponent won't parse them to Date objects and using IgcTreeGridComponent Sorting won't work as expected. If you want to use string objects, additional logic should be implemented on an application level, in order to parse the values to Date objects.

    Sorting Indicators Templates

    열 머리글의 정렬 표시기 아이콘은 템플릿을 사용하여 사용자 정의할 수 있습니다. 모든 정렬 상태(오름차순, 내림차순, 없음)에 대한 정렬 표시기 템플릿을 작성하는 데 다음 속성을 사용할 수 있습니다.

    • 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>`;
}

    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>`;
}

    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>`;
}

    Styling

    사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

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

    그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

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

    Demo

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.