Angular 그리드 선택

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

Angular Grid Selection Example

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

Angular Grid Selection Options

Grid 구성 요소용 IgniteUI Angular 세 가지 선택 모드를 제공합니다 -행 선택, 셀 선택, 열 선택. 기본적으로 그리드에서는 멀티셀 선택 모드만 활성화되어 있습니다. 선택 모드를 변경하거나 활성화하려면 속성 또는 속성을 사용할rowSelection​cellSelection​selectable 수 있습니다.

Angular Row Selection

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

• 없음 - 그리드에 대한 행 선택이 비활성화됩니다.
• Single - 그리드 내에서 하나의 행만 선택할 수 있습니다.
• 다중 - 다중 행 선택은 다음을 사용하여 가능할 것입니다.Row selectors, 키 조합은 다음과 같다. ctrl + 클릭 또는 다음 위치를 누르면 스페이스 키 세포가 집중되면

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

Angular Cell Selection

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

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

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

Angular Column Selection

​selectable​이 속성은 각 열에 대해 다음과 같은 옵션을 지정할 수 있게 해줍니다:

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

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

Grid Context Menu

이벤트를contextMenu 사용하면 IgxGrid 작업을 쉽게 할 수 있는 맞춤형 컨텍스트 메뉴를 추가할 수 있습니다. 격자의 몸체를 우클릭 하면, 이벤트가 트리거된 셀을 방출합니다. 컨텍스트 메뉴는 방출된 셀과 함께 작동합니다.

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

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

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>

여러 셀을 선택하고 버튼을 누르right mouse 세요. 컨텍스트 메뉴가 나타나고, 선택한 데이터를 선택하면Copy cells data 오른쪽 빈 박스에 나타납니다. 그 결과는 다음과 같습니다:

Known Issues and Limitations

• IE11에서 선택이 활성화된 그리드를 사용하려면 각도 애플리케이션의 폴리필.ts에서 배열 폴리필을 명시적으로 가져와야 합니다. IE11은 버전 13.0.0부터 더 이상 지원되지 않습니다.

  import 'core-js/es7/array';
  

• 그리드에 세트가 없primaryKey 고 원격 데이터 시나리오가 활성화되어 있을 때(페이징, 정렬, 필터링, 스크롤 시 원격 서버에 표시할 데이터를 가져오기 요청이 트리거될 때), 데이터 요청이 완료된 후 다음 상태가 줄로 사라집니다:

  • 행 선택
  • 행 확장/축소
  • 행 편집
  • 행 고정

API References

• IgxGridComponent API_IgxGridRow API
• IgxGridCell API
• IgxGrid구성 요소 스타일

Additional Resources

• 그리드 개요
• 행 선택
• 셀 선택
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 가상화 및 성능

• 선택 기반 집계

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

• Ignite UI for Angular 포럼
• ​GitHub Ignite UI for Angular