Angular 그리드 선택

Ignite UI for Angular 사용하면 다양한 이벤트, 풍부한 API 또는 단일 선택과 같은 간단한 마우스 상호 작용을 통해 데이터를 쉽게 선택할 수 있습니다.

Angular Grid Selection Example

아래 샘플은 세 가지 유형의 Grid 셀 선택 동작을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다.

Angular Grid Selection Options

IgniteUI for Angular Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

Angular Row Selection

속성은rowSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

없음 - 그리드에 대한 행 선택이 비활성화됩니다.
Single - 그리드 내에서 하나의 행만 선택할 수 있습니다.
multiple - Multi-row selection would be available by using the Row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focused

자세한 내용은 행 선택 항목을 참조하세요.

Angular Cell Selection

속성은cellSelection 다음과 같은 옵션을 지정할 수 있게 해줍니다:

없음 - 그리드에 대해 셀 선택이 비활성화됩니다.
단일 - 그리드 내에서 하나의 셀만 선택할 수 있습니다.
multiple - 현재 그리드 선택 항목의 기본 상태입니다. 다중 셀 선택은 마우스 왼쪽 버튼을 계속 클릭한 후 셀 위로 마우스를 드래그하여 선택할 수 있습니다.

자세한 내용은 셀 선택 항목을 참조하세요.

Angular Column Selection

The selectable property enables you to specify the following options for each column:

false - 그리드에 대해 해당 열 선택이 비활성화됩니다.
true - 해당 열 선택이 그리드에 대해 활성화됩니다.
이로 인해 다음 세 가지 변형이 발생합니다.
단일 선택 - 열 셀을 마우스로 클릭합니다.
다중 열 선택 -Ctrl + 마우스를 누른 채 열 셀을 클릭합니다.
범위 열 선택 -Shift 키를 누른 채 마우스를 클릭하면 그 사이의 모든 항목이 선택됩니다.

자세한 내용은 열 선택 항목으로 이동하세요.

Using the contextMenu event you can add a custom context menu to facilitate your work with IgxGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.

다중 셀 선택이 있는 경우 선택된 셀이 다중 셀 선택 영역에 있는지 확인하는 로직을 넣습니다. 그렇다면 선택한 셀의 값도 내보냅니다.

기본적으로 주요 기능은 다음과 같습니다.

public rightClick(eventArgs: any) {
     // Prevent the default behavior of the right click
    eventArgs.event.preventDefault();
    this.multiCellArgs = {};
    // If we have multi-cell selection, check if selected cell is within the ranges
    if (this.multiCellSelection) {
        const node = eventArgs.cell.selectionNode;
        const isCellWithinRange = this.grid1.getSelectedRanges().some(range => {
            if (node.column >= range.columnStart &&
                node.column <= range.columnEnd &&
                node.row >= range.rowStart &&
                node.row <= range.rowEnd) {
                return true;
            }
            return false;
        })
        // If the cell is within a multi-cell selection range, bind all the selected cells data
        if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
        }
    }
    // Set the position of the context menu
    this.contextmenuX = eventArgs.event.clientX;
    this.contextmenuY = eventArgs.event.clientY;
    this.clickedCell = eventArgs.cell;
    // Enable the context menu
    this.contextmenu = true;
}

상황에 맞는 메뉴에는 다음과 같은 기능이 있습니다.

선택한 셀의 값 복사
선택한 셀의 dataRow를 복사합니다.
선택한 셀이 다중 셀 선택 범위 내에 있는 경우 선택한 데이터를 모두 복사합니다.

//contextmenu.component.ts

public copySelectedCellData(event) {
    const selectedData = { [this.cell.column.field]: this.cell.value };
    this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value }));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copyRowData(event) {
    const selectedData = this.cell.row.data ;
    this.copyData(JSON.stringify(this.cell.row.data));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copySelectedCells(event) {
    const selectedData = this.selectedCells.data;
    this.copyData(JSON.stringify(selectedData));
    this.onCellValueCopy.emit({ data: selectedData });
}

IgxGrid는 복사된 데이터를 가져와 컨테이너 요소에 붙여넣습니다.

그리드와 컨텍스트 메뉴를 결합하는 데 사용할 템플릿은 다음과 같습니다.

<div class="wrapper">
    <div class="grid__wrapper" (window:click)="disableContextMenu()">
        <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
            (contextMenu)="rightClick($event)" (rangeSelected)="getCells($event)"
            (selected)="cellSelection($event)">
        <!-- Columns area -->
        </igx-grid>
        <div *ngIf="contextmenu==true">
            <contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell" [selectedCells]="multiCellArgs" (onCellValueCopy)="copy($event)">
            </contextmenu>
        </div>
    </div>
    <div class="selected-data-area">
        <div>
           <pre>{{copiedData}}</pre>
        </div>
    </div>
</div>

Select multiple cells and press the right mouse button. The context menu will appear and after selecting Copy cells data the selected data will appear in the right empty box. The result is:

Known Issues and Limitations

IE11에서 선택이 활성화된 그리드를 사용하려면 각도 애플리케이션의 폴리필.ts에서 배열 폴리필을 명시적으로 가져와야 합니다. IE11은 버전 13.0.0부터 더 이상 지원되지 않습니다.
```
import 'core-js/es7/array';
```
When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:
- 행 선택
- 행 확장/축소
- 행 편집
- 행 고정

API References

Additional Resources

선택 기반 집계

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