Grid Sorting Overview

In Ignite UI for Angular Grid, data sorting is enabled on a per-column level, meaning that the igx-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 입력을 통해 실행됩니다. Grid 정렬을 사용하면 sortingIgnoreCase 속성을 설정하여 대소문자 구분을 실행할 수도 있습니다:

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

API를 통한 정렬

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

import { SortingDirection } from 'igniteui-angular';

// Perform a case insensitive ascending sort on the ProductName column.
this.grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.grid.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.grid.clearSort('ProductName');

// Removes the sorting state from every column in the Grid
this.grid.clearSort();
Note

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

초기 정렬 상태

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

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

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

원격 정렬

onDataPreLoadonSortingDone 출력에 서브스크라이브하여 Grid의 원격 정렬을 제공할 수 있습니다. 사용 방법에 대한 자세한 정보는 Grid 가상화 및 성능 문서를 참조하십시오.

API 참조

추가 리소스

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