선택 기능을 사용하면 머티리얼 UI 기반 그리드에서 풍부한 데이터 선택 기능을 사용할 수 있습니다. 강력한 API와 사용하기 쉬운 메소드 덕분에 다양한 이벤트와 단일 선택 작업이 가능합니다. 이제 Grid는 셀 선택을 위한 세 가지 모드를 지원하며 cellSelection 속성을 변경하여 모드 간에 쉽게 전환할 수 있습니다. 셀 선택을 비활성화할 수 있으며, 그리드 내에서 하나의 셀만 선택하거나 그리드에서 여러 셀을 선택할 수 있으며 이는 기본 옵션으로 제공됩니다. 하지만 각 옵션에 대해 더 자세히 살펴보겠습니다.
最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。
<spanclass="button-group-wrapper"><igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup></span><divclass="sample-wrapper"><divclass="grid-wrapper"><igx-grid [igxPreventDocumentScroll]="true" #grid [data]="data" [height]="'550px'" [cellSelection]="selectionMode"
(rangeSelected)="onRangeSelected()"
(selected)="onCellSelected($event)"
><igx-column [field]="'ProductID'"></igx-column><igx-column [field]="'ProductName'"></igx-column><igx-column [field]="'UnitsInStock'" [dataType]="'number'"></igx-column><igx-column [field]="'UnitPrice'" [dataType]="'number'"></igx-column><igx-column [field]="'Discontinued'" [dataType]="'boolean'"></igx-column><igx-column [field]="'OrderDate'" [dataType]="'date'"></igx-column></igx-grid></div><divclass="log-wrapper"><divclass="selected-data-area"><divclass="logContainer"><divclass="highlight"><span>Events execution sequence</span><buttonclass="clearBtn"igxButton="flat" (click)="clearLog()"><igx-icon>clear</igx-icon><span>Clear log</span></button></div><hr /><div #loggerclass="logger"></div></div></div></div></div><igx-snackbar #snackbaractionText="Got it. Thanks!" (clicked)="snackbar.close()"><divclass="container"><igx-icon>notification_important</igx-icon><ng-container *ngIf="selectionMode === 'multiple'"><ul><li><b>This is the default selection behavior.</b></li><li>Click on a cell and while pressing the mouse key perform drag action.
</li><li>Select a cell and press Shift + Arrow down key, this will start range selection as well.</li></ul></ng-container><ng-container *ngIf="selectionMode === 'single'"><ul><li><b>Now you can select only one cell within the grid.</b></li><li>On single cell click the previous selection state will be cleared.</li><li>The mouse drag will not work and instead of selecting a cell, this will make default text selection.</li></ul></ng-container><ng-container *ngIf="selectionMode === 'none'"><ul><li><b>Now you are unable to select a cell while interacting with grid UI.</b></li><li>If you need to select a cell, you can use the grid API methods.</li></ul></ng-container></div></igx-snackbar>html
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
선택 유형
그리드 다중 셀 선택
셀을 선택하는 방법:
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 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.
<divclass="wrapper centered"><h5>Perform range selection on the left Grid to transfer data to the right Grid</h5></div><divclass="wrapper"><divclass="left"><igx-grid [igxPreventDocumentScroll]="true" #sourcewidth="100%"
[allowFiltering]="true"filterMode="excelStyleFilter"
(rangeSelected)="transferData(source, target, notification)"
(columnInit)="initColumn($event)"
(sortingDone)="transferExpressions(source, target, 'sort')"
(filteringDone)="transferExpressions(source, target, 'filter')"
[data]="sourceData"height="600px" [autoGenerate]="true"></igx-grid></div><divclass="right"><igx-grid [igxPreventDocumentScroll]="true" #targetwidth="100%"
[data]="targetData"height="600px" [autoGenerate]="true"
(columnInit)="initColumn($event)"></igx-grid></div></div><igx-toast #notification></igx-toast>html
[cellSelection]="'single'" 설정하면 그리드에서 한 번에 하나의 셀만 선택할 수 있습니다. 또한 모드 mouse drag 작동하지 않으며 셀을 선택하는 대신 기본 텍스트 선택이 됩니다.
단일 셀을 선택한 경우 selected 이벤트가 발생합니다. selection mode ~이다 single 또는 multiple. 다중 셀 선택 모드에서 셀 범위를 선택할 때 rangeSelected 이벤트가 방출됩니다.
그리드 없음 선택
셀 선택을 비활성화하려면 [cellSelection]="'none'" 속성을 설정하면 됩니다. 이 모드에서 셀을 클릭하거나 키보드로 탐색하려고 하면 셀이 선택되지 않고 activation style만 적용되며 페이지의 다른 요소를 스크롤하거나 클릭하면 셀이 손실됩니다. 선택을 정의하는 유일한 방법은 아래에 설명된 API 메서드를 사용하는 것입니다.
키보드 탐색 상호 작용
Shift 키를 누른 상태에서
현재 선택 항목에 위 셀을 추가하려면 Shift + 위쪽 화살표를 사용하세요.
현재 선택 항목에 아래 셀을 추가하려면 Shift + 아래쪽 화살표를 사용하세요.
Shift + 왼쪽 화살표는 현재 선택 항목에 왼쪽 셀을 추가합니다.
현재 선택 항목에 오른쪽 셀을 추가하려면 Shift + 오른쪽 화살표를 사용하세요.
Ctrl + Shift 키를 누른 상태에서
Ctrl + Shift + 위쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 위의 모든 셀을 선택합니다.
Ctrl + Shift + 아래쪽 화살표를 사용하여 열에서 초점이 맞춰진 셀 아래의 모든 셀을 선택합니다.
Ctrl + Shift + 왼쪽 화살표를 사용하여 행 시작 부분까지 모든 셀을 선택합니다.
Ctrl + Shift + 오른쪽 화살표를 사용하여 행 끝까지 모든 셀을 선택합니다.
Ctrl + Shift + Home: 초점이 맞춰진 셀부터 그리드의 첫 번째 셀까지 모든 셀을 선택합니다.
Ctrl + Shift + End -초점이 맞춰진 셀부터 그리드의 마지막 셀까지 모든 셀을 선택합니다.
연속스크롤은 Grid의 Body 내에서만 가능합니다.
API 사용
다음은 범위를 선택하거나, 선택 항목을 지우거나, 선택한 셀 데이터를 가져오는 데 사용할 수 있는 방법입니다.
범위 선택
selectRange(range)- API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd 행 인덱스를 사용해야 하고, columnStart 및 columnEnd 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.
Sorting- 정렬이 수행되면 선택이 지워지지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 동일하게 유지됩니다.
Paging- 페이징 시 선택한 셀이 지워집니다. 선택 항목은 여러 페이지에 걸쳐 유지되지 않습니다.
Filtering- 필터링이 수행되면 선택이 지워지지 않습니다. 필터링이 지워지면 처음에 선택한 셀이 반환됩니다.
Resizing- 열 크기 조정 시 선택한 셀이 지워지지 않습니다.
Hiding- 선택한 셀을 지우지 않습니다. 열이 숨겨져 있으면 표시되는 다음 열의 셀이 선택됩니다.
Pinning- 선택한 셀이 지워지지 않습니다. 숨기는 것도 마찬가지
Group by- 열 그룹화 시 선택한 셀이 지워지지 않습니다.
스타일링
테마 엔진은 선택한 셀의 범위를 스타일링할 수 있는 속성을 노출합니다.
테마 가져오기
선택 항목 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use"igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:// @import '~igniteui-angular/lib/core/styles/themes/index';scss
and color 함수를 사용하고 contrast-color 싶지 않다면 항상 색상 값을 하드 코딩 할 수 있습니다.
맞춤 테마 만들기
다음으로 우리는 grid-theme 우리를 통과 text-color, background-color 그리고 border-yellow 변수 $cell-selected-text-color, $cell-selected-background 그리고 $cell-active-border-color, 각각: