Angular 계층적 그리드 정렬

Ignite UI for Angular Hierarchical Grid에서 데이터 정렬은 열 단위로 활성화되어 igx-hierarchical-grid에 정렬 가능한 열과 정렬 불가능한 열이 혼합될 수 있습니다. 각도 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.

Note

지금까지는 그룹화/정렬이 서로 함께 작동했습니다. 13.2 버전에서는 정렬에서 그룹화를 분리하는 새로운 동작이 도입되었습니다. 예를 들어 그룹화를 지우면 그리드의 정렬 표현식이 지워지지 않으며 그 반대의 경우도 마찬가지입니다. 그러나 열이 정렬되고 그룹화된 경우 그룹화된 식이 우선합니다.

Angular Hierarchical Grid Sorting Overview Example

또한 igx-hierarchical-grid의contextMenu Output을 이용한 정렬을 위한 맞춤형 컨텍스트 메뉴가 추가되었습니다.

이 과정은 입력을sortable 통해 이루어집니다. 계층적 그리드 정렬을 통해 대문자 구분 정렬을 수행할 수 있는 속성도 설정할sortingIgnoreCase 수 있습니다:

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

Sorting Indicators

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

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

Sorting through the API

계층 그리드 API를 통해 계층 그리sort 드 방법을 사용하여 어떤 열이나 열의 조합도 정렬할 수 있습니다:

import { SortingDirection } from 'igniteui-angular/grids/core';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

// 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 알고리즘을 사용해 수행됩니다. 또는IgxColumnComponentISortingExpression 대체 알고리즘의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

그sortStrategy 계층적 격자는 다른 유형입니다.sortStrategy 기둥, 서로 다른 범위에서 작동하고 서로 다른 매개변수를 노출하기 때문입니다.

Note

정렬 작업은 계층적 그리드의 기본 데이터 소스를 변경 하지 않습니다.

Initial sorting state

계층형 그리드의 초기 정렬 상태를 정렬 표현식의 배열을 계층 그리드의 속성에sortingExpressions 전달하여 설정할 수 있습니다.

public ngOnInit(): void {
    this.hierarchicalGrid.sortingExpressions = [
        { 
            dir: SortingDirection.Asc, fieldName: 'Artist',
            ignoreCase: true, strategy: DefaultSortingStrategy.instance() 
        }
    ];
}

Note

만약 타입의 가치가 있다면요string는 다음 열에서 사용됩니다.dataType Date, 계층 격자는 이를 다음과 같이 파싱하지 않습니다.Date 객체와 계층적 격자 사용sorting 기대만큼 작동하지 않을 거예요. 만약 당신이 사용하고 싶다면string 객체 값을 파싱하기 위해 애플리케이션 수준에서 추가 논리를 구현해야 합니다.Date 물건들.

Sorting Indicators Templates

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

IgxSortHeaderIconDirective– 정렬이 적용되지 않을 때 정렬 아이콘을 다시 템플릿합니다.

<ng-template igxSortHeaderIcon>
    <igx-icon>unfold_more</igx-icon>
</ng-template>

IgxSortAscendingHeaderIconDirective– 열이 오름차순으로 정렬될 때 정렬 아이콘을 다시 템플릿합니다.

<ng-template igxSortAscendingHeaderIcon>
    <igx-icon>expand_less</igx-icon>
</ng-template>

IgxSortDescendningHeaderIconDirective– 열이 내림차순으로 정렬될 때 정렬 아이콘을 다시 템플릿합니다.

<ng-template igxSortDescendingHeaderIcon>
    <igx-icon>expand_more</igx-icon>
</ng-template>

스타일링

정렬 동작 스타일링을 시작하려면, 모든 테마 함수와 컴포넌트 믹싱이 있는 파일을 가져와index야 합니다:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

가장 간단한 방법을 따라, 우리는 를grid-theme 확장하고 와$sorted-header-icon-color 매개변수를 받아들sortable-header-icon-hover-color 이는 새로운 테마를 만듭니다.

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

Note

우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.

마지막 단계는 구성요소 믹스인을 포함하는 것입니다.

@include css-vars($custom-theme);

Demo

Note

샘플은 선택된 글로벌 테마Change Theme의 영향을 받지 않습니다.

API References

Additional Resources

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