Angular 계층형 그리드 열 선택

    열 선택 기능을 사용하면 한 번의 클릭으로 전체 열을 쉽게 선택할 수 있습니다. 헤더 셀과 아래의 모든 항목에 초점을 맞춰 특정 열의 중요성을 강조합니다. 이 기능에는 선택 상태 조작, 선택한 분수에서 데이터 추출, 데이터 분석 작업 및 시각화를 허용하는 풍부한 API가 함께 제공됩니다.

    Angular Column Selection Example

    아래 샘플은 계층적 그리드의 열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.

    * 사진 및 Debut 에는 열 선택이 비활성화되어 있습니다.

    Basic usage

    열 선택 기능은 다음을 통해 활성화할 수 있습니다. columnSelection 입력, 소요되는 그리드선택모드 가치.

    상호 작용

    기본 선택 모드는 none 입니다. single 또는 multiple으로 설정하면 제시된 모든 열을 selectable 수 있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.

    Note

    Multi-column Headers 반성하지 마세요. selectable 입력. 그만큼 IgxColumnGroupComponent ~이다 selectable, 해당 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우입니다. 또한 구성 요소는 다음과 같이 표시됩니다. selected 만약 그 전부라면 selectable 후손은 selected.

    * 위치 열 그룹 아래에서는 도시 열만 선택할 수 있습니다.

    Keyboard combinations

    Note

    키보드 조합은 그리드 columnSelection 입력이 multiple으로 설정된 경우에만 사용할 수 있습니다.

    ​열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.

    • 다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
    • 범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.

    API manipulations

    그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected 해당 설정을 통해 세터.

    Note

    위 명령문은 IgxColumnGroupComponent 에도 적용됩니다. 단, selected 속성이 변경되면 해당 하위 항목의 상태가 변경됩니다.

    API 조작에 관한 자세한 내용은 API References 섹션에서 확인할 수 있습니다.

    스타일링

    스타일링 옵션을 살펴보기 전에 핵심 모듈과 모든 구성 요소 믹스인을 가져와야 합니다.

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

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

    ​row selection과 column selection 독립적으로 조작할 수 없습니다. 그것들은 동일한 variables에 의존합니다.

    이제 선택 및 호버 스타일을 변경해 보겠습니다.
    가장 간단한 접근 방식에 따라 맞춤 테마를 정의해 보겠습니다.

    $custom-grid-theme: grid-theme(
    $row-selected-background: #011627,
    $row-selected-text-color: #ECAA53,
    $row-selected-hover-background: #011627,
    $header-selected-text-color: #ECAA53,
    $header-selected-background: #011627
);

    grid-theme 여러 매개변수를 허용하지만 선택한 모든 열의 모양을 변경하는 5개 매개변수는 다음과 같습니다.

    • $row-selected-ground- 선택한 분수의 배경을 설정합니다.
    • $row-selected-text-color- 선택한 분수의 텍스트 색상을 설정합니다.
    • $row-selected-hover-ground- 호버링된 셀 또는 셀 묶음의 색상을 설정합니다.
    • $header-selected-text-color- 선택한 열 헤더의 텍스트 색상을 설정합니다.
    • $header-selected-ground- 선택한 열 헤더의 배경색을 설정합니다.

    Using CSS Variables

    마지막 단계는 사용자 정의 igx-grid 테마를 포함하는 것입니다.

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

    Overriding the Base Theme

    Internet Explorer 11의 구성 요소 스타일을 지정하려면 CSS 변수를 지원하지 않기 때문에 다른 접근 방식을 사용해야 합니다.

    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다. 사용자 정의 테마가 다른 구성 요소로 누출되는 것을 방지하려면::ng-deep 앞에:host 선택기를 포함했는지 확인하세요.

    :host {
    ::ng-deep {
        @include grid($custom-column-selection-theme);
    }
}

    Demo

    Note

    샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.

    API References

    열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.

    IgxHierarchicalGridComponent properties:

    IgxColumnComponent properties:

    IgxColumnGrpupComponent properties:

    IgxHierarchicalGridComponent events:

    Additional Resources

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