Angular 그리드 행 선택

Ignite UI for Angular에서 행 선택을 사용하면 행 내의 다른 모든 열보다 선행하는 행 선택기 열이 있습니다. 사용자가 행 선택기를 클릭하면 행이 선택되거나 선택 해제되어 사용자가 여러 행의 데이터를 선택할 수 있습니다.

Angular Row Selection Example

아래 샘플은 세 가지 유형의 Grid 행 선택 동작을 보여줍니다. 아래 버튼을 사용하여 사용 가능한 각 선택 모드를 활성화합니다. 스낵바 메시지 상자를 통해 각 버튼 상호작용에 대한 간략한 설명이 제공됩니다. 행 선택기 확인란을 숨기 거나 표시하려면 전환 버튼을 사용하세요.

새로 선택한 요소를 얻으려면 event.newSelection을 사용할 수 있습니다.

public handleRowSelection(event: IRowSelectionEventArgs) {
    this.selectedRowsCount = event.newSelection.length;
    this.selectedRowIndex = event.newSelection[0];
    this.snackbarRowCount.open();
    this.snackbar.close();
    this.logAnEvent(`=> 'rowSelectionChanging' with value: ` + JSON.stringify(event.newSelection));
}

Setup

행 선택igx-grid을 설정하려면 rowSelection 속성을 설정하기만 하면 됩니다. 이 속성은 GridSelectionMode 열거를 허용합니다. GridSelectionMode는 다음과 같은 세 가지 모드를 제공합니다: none, single, multiple. 아래에서 각 항목을 좀 더 자세히 살펴보겠습니다.

None Selection

기본값에서는igx-grid 행 선택이 비활성화되어 있으며, 그렇지 않으면 ([rowSelection]="'none'"). 따라서 그리드 UI와의 상호작용을 통해 행을 선택하거나 해제할 수 없 으며, 이 작업을 완료하는 유일한 방법은 제공된 API 메서드를 사용하는 것입니다.

Single Selection

단일 행 선택은 이제 쉽게 설정할 수 있으며, 필요한 것은 속성을 설정[rowSelection] = '"single"' 하는 것뿐입니다. 이렇게 하면 격자 내에서 한 행만 선택할 수 있습니다. 셀을 클릭하거나 행의 셀에 집중할 때 스페이스 키를 눌러 행을 선택할 수 있고, 물론 행 선택기 필드를 클릭해 행을 선택할 수도 있습니다. 행이 선택되거나 해제되면 SelectionChanging 이벤트가 발생합니다.

<!-- selectionExample.component.html -->

<igx-grid [data]="remote | async" [rowSelection]="'single'" [autoGenerate]="true"
          (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
</igx-grid>

/* selectionExample.component.ts */

public handleRowSelection(args) {
    if (args.added.length && args.added[0] === 3) {
        args.cancel = true;
    }
}

Multiple Selection

에서 여러 행 선택을 활성화하려면igx-grid 그냥rowSelection property를multiple. 이렇게 하면 각 행과 그리드 헤더에 행 선택기 필드가 활성화됩니다. 행 선택기는 사용자가 여러 행을 선택할 수 있게 하며, 스크롤, 페이징, 정렬 및 필터링과 같은 데이터 작업을 통해 선택이 유지됩니다. 행은 셀을 클릭하거나 다음 행을 누르는 방법으로도 선택할 수 있습니다 공간 셀에 포커스가 맞춰져 있을 때 키를 누릅니다. 한 행을 선택하고 다른 행을 누른 상태에서 다른 행을 클릭하는 경우 교대 키, 이 방법은 전체 행 범위를 선택합니다. 이 선택 모드에서는 단일 행을 클릭하면 이전에 선택된 행들이 선택 해제됩니다. 만약 당신이 클릭를 누르고 있는 동안 ctrl 키를 누르면 행이 전환되고 이전 선택 항목이 유지됩니다.

<!-- selectionExample.component.html -->

<igx-grid [data]="remote | async" [primaryKey]="'ProductID'" [rowSelection]="'multiple'"
        (rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true" [autoGenerate]="true">
</igx-grid>

<!-- selectionExample.component.ts -->

 public handleRowSelection(event: IRowSelectionEventArgs) {
    // use event.newSelection to retrieve primary key/row data of latest selected row
    this.selectedRowsCount = event.newSelection.length;
    this.selectedRowIndex = event.newSelection[0];
 }

노트

• 적절한 행 선택과 셀 선택을 위해 Grid가 원격 가상화를 제공하는 반면,primaryKey a가 제공되어야 합니다.

• 그리드에 원격 가상화가 있는 경우 헤더 확인란을 클릭하면 현재 그리드에 있는 모든 레코드가 선택/선택 취소됩니다. 요청 시 그리드에 새 데이터가 로드되면 새로 추가된 행은 선택되지 않으며 이는 제한 사항이므로 해당 동작을 직접 처리해야 하며 제공된 API 메소드를 사용하여 해당 행을 선택할 수 있습니다.

• 행 선택이 이벤트를 트리거rowSelectionChanging 합니다. 이 이벤트는 새 선택, 이전 선택, 이전 선택에서 추가 되거나 제거 된 행에 대한 정보를 제공합니다. 또한 이벤트는 취소가 가능 해서 선택을 막을 수 있습니다.

• 행 선택이 활성화되면 행 셀렉터가 표시되지만, 표시하고 싶지 않으면 설정할[hideRowSelectors] = true 수 있습니다.

• 런타임 시 행 선택 모드 간에 전환하면 이전 행 선택 상태가 지워집니다.

API usage

Select rows programmatically

아래 코드 스니펫은 한 행 또는 여러 행을 동시에 선택하는 데 사용할 수 있습니다(바이아primaryKey); 또한, 이 방법의 두 번째 매개변수는 불리언 속성으로, 이전 행 선택이 삭제될지 여부를 결정할 수 있습니다. 이전 선택은 기본적으로 유지됩니다.

<!-- selectionExample.component.html -->

<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5], true)">Select 1,2 and 5</button> // select rows and clear previous selection state

그러면 ID 1, 2, 5의 데이터 항목에 해당하는 행이 그리드 선택 항목에 추가됩니다.

Deselect rows

프로그래밍적으로 행을 선택 해제해야 한다면 이deselectRows(rowIds: []) 방법을 사용할 수 있습니다.

<!-- selectionExample.component.html -->

<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>

Row selection event

행 선택rowSelectionChanging 이벤트에 변화가 있을 때 발생한다.rowSelectionChanging 다음과 같은 논증을 드러냅니다:

• oldSelection- 행 선택 이전 상태를 포함하는 행 데이터 배열.
• newSelection- 행 선택의 새로운 상태와 일치하는 행 데이터 배열.
• added- 현재 선택에 추가된 행 데이터 배열.
• removed- 이전 선택 상태에 따라 현재 제거된 행 데이터 배열.
• event- 행 선택 변경을 유발한 원래 이벤트.
• cancel- 행 선택 변경을 방지할 수 있습니다.

원격 데이터 시나리오의 행 선택 이벤트

원격 데이터 시나리오에서는 격자primaryKey에 set,eventrowSelectionChanging.oldSelection 인자가 현재 데이터 뷰 밖에 있는 행의 전체 행 데이터 객체를 포함하지 않습니다. 이 경우 객체는rowSelectionChanging.oldSelection 필드 속성 중 하나primaryKey만 포함합니다. 나머지 행들은 현재 데이터 뷰에 위치해 있으며,rowSelectionChanging.oldSelection 전체 행 데이터를 포함하게 됩니다.

<!-- selectionExample.component.html -->

<igx-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-grid>

/* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.cancel = true; // this will cancel the row selection
}

Select all rows

또 다른 유용한 API 메서드는igx-grid 다음과 같습니다.selectAll(onlyFilteredData) 기본적으로 이 방법은 모든 데이터 행을 선택하지만, 필터링이 적용되면 필터 조건에 맞는 행만 선택합니다. 하지만 false parameterselectAll(false)로 메서드를 호출하면 필터링이 적용되어도 항상 그리드 내 모든 데이터를 선택합니다.

Note

이 방법은selectAll() 삭제된 행을 선택하지 않는다는 점을 기억하세요.

Deselect all rows

igx-grid​deselectAll(onlyFilteredData)기본 조건으로 모든 데이터 행을 제외하지만, 필터링이 적용되면 필터 조건에 맞는 행만 선택 해제됩니다. 하지만 false parameterdeselectAll(false)로 메서드를 호출하면 필터링이 적용되더라도 항상 모든 행 선택 상태가 지워집니다.

How to get selected rows

현재 선택된 행을 보고 싶으면 게터로selectedRows 행 ID를 얻을 수 있습니다.

public getSelectedRows() {
    const currentSelection = this.grid.selectedRows; // return array of row IDs
}

또한, 행 IDselectedRows를 할당하면 그리드의 선택 상태를 변경할 수 있습니다.

public mySelectedRows = [1, 2, 3]; // an array of row IDs

<igx-grid primaryKey="ProductID" rowSelection="multiple" [autoGenerate]="false" [mySelectedRows]="selectedRows" [data]="data">
    <igx-column [field]="'ProductID'"></igx-column>
    <igx-column [field]="'ProductName'"></igx-column>
    <igx-column [field]="'UnitsInStock'"></igx-column>
</igx-grid>

Row selector templates

그리드에서 헤더 및 행 선택기를 템플릿화할 수 있으며 다양한 시나리오에 유용한 기능을 제공하는 해당 컨텍스트에 액세스할 수도 있습니다.

기본적으로 그리드는 행 선택기의 부모 컨테이너나 행 자체에서 모든 행 선택 상호작용을 처리 하며, 템플릿의 상태 시각화만 남겨둡니다. 기본 기능을 덮어쓰는 것은 일반적으로 이벤트를rowSelectionChanging​ 이용해 해야 합니다. 기본 기능을 덮어쓰는 핸들러가 있는click 커스텀 템플릿을 구현한다면, 올바른 행 상태를 유지하기 위해 이벤트 전파를 중단해야 합니다.

행 템플릿

사용자 지정 행 선택 템플릿을 만들려면, 그igx-grid 안에서 with<ng-template> 지시문을 선언igxRowSelector 하세요. 템플릿에서 암묵적으로 제공된 컨텍스트 변수에 접근할 수 있으며, 이 변수는 행의 상태에 대한 정보를 제공합니다.

속성은selected 현재 행이 선택되었는지 여부를 보여주며,index 속성은 행 인덱스에 접근할 수 있습니다.

<ng-template igxRowSelector let-rowContext>
    {{ rowContext.index }}
    <igx-checkbox
        [checked]="rowContext.selected"
        [readonly]="true"
    ></igx-checkbox>
</ng-template>

이 속성은rowID 행의igx-grid 참조를 얻는 데 사용할 수 있습니다. 이는 행 셀렉터 요소에 핸들러를 구현click 할 때 유용합니다.

<ng-template igxRowSelector let-rowContext>
    <igx-checkbox (click)="onSelectorClick($event, rowContext.key)"></igx-checkbox>
</ng-template>

위 예시에서는 를igx-checkbox 사용하고 있으며, 그rowContext.selected 속성에 바인딩checked 합니다. 이 현상을 저희 사이트에서Row Numbering Demo 직접 확인해 보세요.

Header template

그리드 내에서 사용자 지정 헤더 선택기 템플릿을 만들려면 with<ng-template> 지시문을 선언igxHeadSelector 하세요. 템플릿에서 암묵적으로 제공된 컨텍스트 변수에 접근할 수 있으며, 헤더 상태에 대한 정보를 제공하는 속성을 제공합니다.

이 속성은selectedCount 현재 선택된 행 수를 보여주고,totalCount 그리드 전체에 몇 행이 있는지를 보여줍니다.

<ng-template igxHeadSelector let-headContext>
    {{ headContext.selectedCount }} / {{ headContext.totalCount  }}
</ng-template>

와selectedCount 속성은totalCount 헤드 셀렉터를 검사할지 불확정(부분 선택)해야 하는지 결정하는 데 사용될 수 있습니다.

<igx-grid [data]="gridData" primaryKey="ProductID" rowSelection="multiple">
    <!-- ... -->
    <ng-template igxHeadSelector let-headContext>
        <igx-checkbox
            [checked]=" headContext.selectedCount > 0 && headContext.selectedCount === headContext.totalCount"
            [indeterminate]="headContext.selectedCount > 0 && headContext.selectedCount !== headContext.totalCount">
        </igx-checkbox>
    </ng-template>
</igx-grid>

Row Numbering Demo

이 데모는 맞춤형 헤더와 행 셀렉터의 사용법을 보여줍니다. 후자는 행 번호와rowContext.index bound toigx-checkbox를 표시하는 데 사용됩니다rowContext.selected.

Excel Style Row Selectors Demo

이 데모에서는 Excel과 유사한 헤더 및 행 선택기와 유사한 사용자 지정 템플릿을 사용합니다.

Conditional Selection Demo

이 데모는 이벤트와 선택 불가능한 행에 대한 체크박스가 비활성화된 커스텀 템플릿을 사용해rowSelectionChanging 일부 행이 선택되는 것을 방지합니다.

API References

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

Additional Resources

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

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

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