Hierarchical Grid Sorting Overview

    In Ignite UI for Angular Hierarchical Grid, data sorting is enabled on a per-column level, meaning that the igx-hierarchical-grid can have a mix of sortable and non-sortable columns. Performing angular sort actions enables you to change the display order of the records based on specified criteria.

    데모

    이것은 sortable 입력을 통해 실행됩니다. Hierarchical Grid 정렬을 사용하면 sortingIgnoreCase 속성을 설정하여 대소문자 구분을 실행할 수도 있습니다:

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

    API를 통한 정렬

    Hierarchical Grid sort 메소드를 사용하여 Hierarchical Grid API를 통해 모든 열 또는 열 조합을 정렬할 수 있습니다:

    import { SortingDirection } from 'igniteui-angular';

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

    정렬은 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();
    Note

    정렬 조작은 Hierarchical Grid의 기본 데이터 소스를 변경하지 않습니다.

    초기 정렬 상태

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

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

    string 유형의 값이 dataType Date 열에서 사용되는 경우, Hierarchical Grid는 Date 객체로 구문 분석하지 않으므로 Hierarchical Grid를 사용하면 sorting이 예상대로 작동하지 않습니다. string 객체를 사용하려면 값을 Date 객체로 구문 분석하기 위해 애플리케이션 수준에서 추가 논리를 구현해야 합니다.

    API 참조

    추가 리소스

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