Web Components 계층적 그리드 열 선택 개요

    Ignite UI for Web Components의 Web Components 계층적 그리드 열 선택 기능은 한 번의 클릭으로 전체 열을 선택하고 강조 표시할 수 있는 간단하고 Excel과 유사한 방법을 제공합니다. 입력을 통해 활성화할 수 있습니다 columnSelection. 풍부한 API 덕분에 이 기능을 사용하면 선택 상태, 선택한 분획에서 데이터 추출, 데이터 분석 작업 및 시각화를 쉽게 조작할 수 있습니다.

    Web Components 계층적 그리드 열 선택 예

    아래 샘플은 세 가지 유형의 IgcHierarchicalGridComponent​ ​열 선택 동작을 보여 줍니다. 아래의 열 선택 드롭다운을 사용하여 사용 가능한 각 선택 모드를 활성화합니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

    기본 사용법

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

    Ignite UI for Web Components | CTA 배너

    상호 작용

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

    다중 열 머리글 기능은 선택 가능한 입력에 반영되지 않습니다. ColumnGroupComponent는 하위 항목 중 하나 이상이 선택 동작을 활성화한 경우 선택 가능합니다. 또한 선택 가능한 하위 항목이 모두 선택된 경우 구성 요소는 선택됨으로 표시됩니다.

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

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    키보드 조합

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

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

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

    API 조작

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

    위 명령문은 선택한 속성이 변경될 때 해당 하위 항목의 상태가 변경된다는 점을 제외하고 ColumnGroupComponent에도 적용됩니다.

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

    스타일링

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

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

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

    .grid {
    --ig-grid-row-selected-background: #0062A3;
    --ig-grid-row-selected-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
    --ig-grid-header-selected-text-color: #ecaa53;
    --ig-grid-header-selected-background: #0062A3;
    --ig-grid-row-selected-hover-text-color: #ecaa53;
    --ig-grid-row-selected-hover-background: #0062A3;
}
css

    데모

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API 참조

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

    IgcHierarchicalGridComponent properties:

    IgcColumnComponent properties:

    columnGroup properties:

    IgcHierarchicalGridComponent events:

    • OnColumnsSelectionChange

    추가 리소스

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