Web Components 그리드 정렬

    웹 구성 Web Components 요소 데이터 정렬 기능을 Ignite UI for Web Components 열별 수준에서 활성화됩니다. 즉, IgcGridComponent 에는 정렬 가능한 열과 정렬 불가능한 열이 혼합되어 있을 수 있습니다. Web Components 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.

    Web Components 그리드 정렬 개요 예제

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

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

    지표 정렬

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

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

    API를 통한 정렬

    ​IgcGridComponent​ ​sort 방법을 사용하여 IgcGridComponent API를 통해 모든 열 또는 열 조합을 정렬할 수 있습니다.

    import { SortingDirection } from 'igniteui-webcomponents-grids';
    // 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 } ]);

    [! [! 참고] 정렬은 당사 DefaultSortingStrategy 알고리즘을 사용하여 수행됩니다. Any IgcColumnComponent or ISortingExpression as a substitute 알고리즘의 사용자 지정 구현을 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();

    [! [! 참고] sortStrategy of the 는 다른 범위에서 작동하고 다른 매개 변수를 노출하기 때문에 of the IgcGridComponent​ ​IgcColumnComponent와 비교 sortStrategy 하여 다른 유형입니다.

    [! [! 참고] 정렬 작업 하지 않습니다의 기본 데이터 원본을 변경합니다. IgcGridComponent.

    초기 정렬 상태

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

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

    [! [! 참고] 유형의 string 값이 열 dataType Date에서 사용되는 경우 IgcGridComponent 객체로 Date 구문 분석하지 않고 using IgcGridComponent Sorting이 예상대로 작동하지 않습니다. 개체를 사용하려면 string 값을 개체로 구문 분석하기 위해 응용 프로그램 수준에서 추가 논리를 구현해야 합니다 Date.

    지표 템플릿 정렬

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

    • sortHeaderIconTemplate– 정렬이 적용되지 않은 경우 정렬 아이콘의 템플릿을 다시 지정합니다.
    constructor() { var grid = this.grid = document.getElementById('grid') as IgcGridComponent; 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 IgcGridComponent; 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 IgcGridComponent; grid.data = this.data; grid.sortDescendingHeaderIconTemplate = this.sortDescendingHeaderIconTemplate; } public sortDescendingHeaderIconTemplate = (ctx: IgcGridHeaderTemplateContext) => { return html`<igc-icon name="expand_more"></igc-icon>`; }

    스타일링

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

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

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

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

    데모

    API 참조

    추가 리소스

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