Angular 셀 선택
선택 기능을 사용하면 머티리얼 UI 기반 트리 그리드에서 풍부한 데이터 선택 기능을 사용할 수 있습니다. 강력한 API와 사용하기 쉬운 메소드 덕분에 다양한 이벤트와 단일 선택 작업이 가능합니다. 이제 트리 그리드는 셀 선택을 위한 세 가지 모드를 지원하며 cellSelection
속성을 변경하여 모드 간을 쉽게 전환할 수 있습니다. 셀 선택을 비활성화할 수 있으며, 그리드 내에서 하나의 셀만 선택하거나 그리드에서 여러 셀을 선택할 수 있으며 이는 기본 옵션으로 제공됩니다. 하지만 각 옵션에 대해 더 자세히 살펴보겠습니다.
Angular Cell Selection Example
아래 샘플은 트리 그리드의 셀 선택 동작의 세 가지 유형을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.
Selection types
Tree Grid Multiple-cell Selection
셀을 선택하는 방법:
-
Mouse drag
- 셀의 직사각형 데이터 선택이 수행됩니다. -
Ctrl key
누르기 +Mouse drag
- 여러 범위 선택이 수행됩니다. 다른 기존 셀 선택은 유지됩니다. - Shift 키를 사용하여 즉시 다중 셀 선택. 단일 셀을 선택하고 Shift 키를 누른 채 다른 단일 셀을 선택합니다. 두 셀 사이의 셀 범위가 선택됩니다.
Shift key
누른 상태에서 다른 두 번째 셀을 선택하면 셀 선택 범위는 처음 선택한 셀 위치(시작점)를 기준으로 업데이트됩니다. -
Shift key
누른 상태에서Arrow keys
사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다. -
Shift key
누른 상태에서Ctrl + Arrow keys
와Ctrl + Home/End
사용하여 키보드 다중 셀 선택. 선택된 셀을 기준으로 다중 셀 선택 범위가 생성됩니다. -
Ctrl key
누른 상태에서Left Mouse key
클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다. - 마우스로 클릭하고 드래그하면 연속적인 다중 셀 선택이 가능합니다.
데모
Tree Grid Single Selection
[cellSelection]="'single'"
설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 mouse drag
작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.
Note
단일 셀을 선택한 경우 selected
이벤트가 발생합니다. selection mode
~이다 single
또는 multiple
. 다중 셀 선택 모드에서 셀 범위를 선택할 때 rangeSelected
이벤트가 방출됩니다.
Tree Grid None selection
셀 선택을 비활성화하려면 [cellSelection]="'none'"
속성을 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고 activation style
만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.
Keyboard navigation interactions
While Shift key is pressed
- 현재 선택 항목에 위 셀을 추가하려면 Shift + 위쪽 화살표를 사용하세요.
- 현재 선택 항목에 아래 셀을 추가하려면 Shift + 아래쪽 화살표를 사용하세요.
- Shift + 왼쪽 화살표는 현재 선택 항목에 왼쪽 셀을 추가합니다.
- 현재 선택 항목에 오른쪽 셀을 추가하려면 Shift + 오른쪽 화살표를 사용하세요.
While Ctrl + Shift keys are pressed
- Ctrl + Shift + 위쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택합니다.
- Ctrl + Shift + 아래쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
- Ctrl + Shift + 왼쪽 화살표를 사용하여 행 시작 부분까지 모든 셀을 선택합니다.
- Ctrl + Shift + 오른쪽 화살표를 사용하여 행 끝까지 모든 셀을 선택합니다.
- Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
- Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.
Note
연속스크롤은 Grid의 Body 내에서만 가능합니다.
Api usage
다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.
Select range
selectRange(range)
- API를 사용하여 셀 범위를 선택합니다. rowStart
및 rowEnd
행 인덱스를 사용해야 하고, columnStart
및 columnEnd
열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.
const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...
const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);
Note
선택 범위는 추가 연산입니다. 이전 선택은 지워지지 않습니다.
Clear cell selection
clearCellSelection()
현재 셀 선택을 지웁니다.
Get selected data
getSelectedData()
선택 항목에 따라 선택한 데이터의 배열을 형식으로 반환합니다. 아래 예:
- 세 개의 서로 다른 단일 셀을 선택한 경우:
expectedData = [
{ CompanyName: 'Infragistics' },
{ Name: 'Michael Langdon' },
{ ParentID: 147 }
];
- 한 열에서 세 개의 셀을 선택한 경우:
expectedData = [
{ Address: 'Obere Str. 57'},
{ Address: 'Avda. de la Constitución 2222'},
{ Address: 'Mataderos 2312'}
];
- 행 1개, 열 3개에서 마우스 드래그로 셀 3개를 선택한 경우:
expectedData = [
{ Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
- 2개의 행과 3개의 열에서 마우스 드래그로 3개의 셀을 선택한 경우:
expectedData = [
{ ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
{ ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
- 서로 다른 두 범위를 선택한 경우:
expectedData = [
{ ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
{ ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
{ Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
{ Address: 'Fauntleroy Circus', City: 'London'}
];
- 두 개의 겹치는 범위를 선택한 경우 형식은 다음과 같습니다.
expectedData = [
{ ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
{ ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
{ ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
{ ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
Note
selectedCells()
표시되는 모든 행(그리드의 뷰 포트에 있는 행)과 표시되지 않는 열을 포함하여 모든 열의 셀을 반환합니다. getSelectedData()
선택한 셀 데이터도 반환합니다. getSelectedRanges(): GridSelectionRange[]
키보드와 포인터 상호 작용을 통해 그리드에서 현재 선택된 범위를 반환합니다. 유형은 GridSelectionRange[]입니다.
Features integration
다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).
Sorting
- 정렬이 수행되면 선택이 지워지지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 동일하게 유지됩니다.Paging
- 페이징 시 선택한 셀이 지워집니다. 선택 항목은 여러 페이지에 걸쳐 유지되지 않습니다.Filtering
- 필터링이 수행되면 선택이 지워지지 않습니다. 필터링이 지워지면 처음에 선택한 셀이 반환됩니다.Resizing
- 열 크기 조정 시 선택한 셀이 지워지지 않습니다.Hiding
- 선택한 셀을 지우지 않습니다. 열이 숨겨져 있으면 표시되는 다음 열의 셀이 선택됩니다.Pinning
- 선택한 셀이 지워지지 않습니다. 숨기는 것도 마찬가지Group by
- 열 그룹화 시 선택한 셀이 지워지지 않습니다.
Styling Guidelines
테마 엔진은 range of selected cells
스타일을 지정할 수 있는 속성을 노출합니다.
Import theme
선택 항목 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Define colors
완료되면 igx-contrast-color
및 igx-color
기능을 사용할 수 있습니다. 이를 통해 선택 범위에 사용하려는 색상을 정의합니다.
$text-color:contrast-color($default-palette, 'primary', 900);
$background-color: color($default-palette, "primary", 900);
$border-yellow: #f2c43c;
Create custom theme
다음으로 우리는 grid-theme
우리를 통과 text-color
, background-color
그리고 border-yellow
변수 $cell-selected-text-color
, $cell-selected-background
그리고 $cell-active-border-color
, 각각:
$custom-grid-theme: grid-theme(
$cell-selected-text-color: $text-color,
$cell-active-border-color: $border-yellow,
$cell-selected-background: $background-color
);
Apply theme
그런 다음 우리가 해야 할 일은 구성 요소 스타일(앱 스타일에도 포함될 수 있음)에 믹스인을 포함하여 igx-tree-grid가 기본 테마 대신 새로 생성된 테마를 사용하도록 하는 것뿐입니다.
@include grid($custom-grid-theme);
Note
구성 요소가 Emulated ViewEncapsulation
사용하는 경우::ng-deep
사용하여 이 캡슐화를 침투해야 합니다. 애플리케이션에 있을 수 있는 다른 그리드에 영향을 주지 않도록:host
선택기 아래에서 스타일 범위를 지정합니다.
:host {
::ng-deep {
@include grid($custom-grid-theme);
}
}
사용자 정의 테마를 적용하면 선택한 그리드 셀이 선택한 색상으로 강조 표시됩니다.
데모
Note
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.