React 계층적 그리드 정렬

    Hierarchical Grid React의 Ignite UI for React 데이터 정렬 기능은 열별 수준에서 활성화되며, 이는 정렬 가능한 열과 정렬할 수 없는 열을 혼합할 수 있음을 의미합니다 IgrHierarchicalGrid. React 정렬 작업을 수행하면 지정된 기준에 따라 레코드의 표시 순서를 변경할 수 있습니다.

    React 계층적 그리드 정렬 개요 예제

    또한 다음을 사용하여 정렬하기 위해 추가된 사용자 정의 컨텍스트 메뉴가 있습니다. IgrHierarchicalGrid의 ContextMenu 출력.

    EXAMPLE
    TSX
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? Ignite UI for React 전체에 액세스하고 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

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

    <IgrColumn field="ProductName" header="Product Name" dataType="string" sortable="true"></IgrColumn>
tsx

    지표 정렬

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

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

    EXAMPLE
    TSX
    CSS
    Edit in:

    Ignite UI for React | CTA 배너

    API를 통한 정렬

    API를 통해 IgrHierarchicalGrid 열 또는 열 조합을 정렬할 수 있습니다. IgrHierarchicalGrid ​ ​sort 메서드:

    import { SortingDirection } from "igniteui-react-grids";
tsx
    // Perform a case insensitive ascending sort on the ProductName column.
hierarchicalGridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);

// Perform sorting on both the ProductName and Price columns.
hierarchicalGridRef.current.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);
tsx

    정렬은 DefaultSortingStrategy 알고리즘을 사용하여 수행됩니다. 모든 IgrColumn 또는 ISortingExpression은 ISortingStrategy의 사용자 정의 구현을 대체 알고리즘으로 사용할 수 있습니다. 이는 예를 들어 복잡한 템플릿 열이나 이미지 열에 대해 사용자 정의 정렬을 정의해야 할 때 유용합니다.

    필터링 동작과 마찬가지로 clearSort 메서드를 사용하여 정렬 상태를 지울 수 있습니다.

    // Removes the sorting state from the ProductName column
hierarchicalGridRef.current.clearSort('ProductName');

// Removes the sorting state from every column in the Hierarchical Grid
hierarchicalGridRef.current.clearSort();
tsx

    IgrHierarchicalGrid의 sortStrategy는 서로 다른 범위에서 작동하고 서로 다른 매개변수를 노출하기 때문에 IgrColumn의 sortStrategy와 다른 유형입니다.

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

    초기 정렬 상태

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

    useEffect(() => {
    hierarchicalGridRef.current.sortingExpressions = [
        { fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
        { fieldName: 'ProductName', dir: SortingDirection.Desc }
    ];
}, [])
tsx

    문자열 유형의 값이 dataType Date의 열에서 사용되는 경우 IgrHierarchicalGrid는 해당 값을 Date 개체로 구문 분석하지 않으며 IgrHierarchicalGrid 정렬을 사용하면 예상대로 작동하지 않습니다. 문자열 개체를 사용하려면 값을 Date 개체로 구문 분석하기 위해 응용 프로그램 수준에서 추가 논리를 구현해야 합니다.

    지표 템플릿 정렬

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

    • sortHeaderIconTemplate– 정렬이 적용되지 않은 경우 정렬 아이콘의 템플릿을 다시 지정합니다.
    function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='unfold_more'></IgrIcon>
        </>
    );
}

<IgrHierarchicalGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrHierarchicalGrid>
tsx
    function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='expand_less'></IgrIcon>
        </>
    );
}

<IgrHierarchicalGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrHierarchicalGrid>
tsx
    function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
    return (
        <>
            <IgrIcon name='expand_more'></IgrIcon>
        </>
    );
}

<IgrHierarchicalGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrHierarchicalGrid>
tsx

    스타일링

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

    <IgrHierarchicalGrid className="grid">
</IgrHierarchicalGrid>
tsx

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

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

    데모

    EXAMPLE
    TSX
    CSS
    Edit in:

    API 참조

    추가 리소스

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