Angular 계층형 그리드 행 선택

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

Angular Row Selection Example

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

Setup

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

None Selection

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

Single Selection

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

<igx-hierarchical-grid [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

/* selectionExample.component.ts */

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

Multiple Selection

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

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-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];
 }

노트

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

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

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

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

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

API usage

Select rows programmatically

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

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

<igx-hierarchical-grid ... [primaryKey]="'artist'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.selectRows([1,2,5], false)">Select 1,2 and 5</button> // select rows and preserve previous selection state

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

Deselect rows

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

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

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

Row selection event

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

• oldSelection- 행 선택 이전 상태를 포함하는 행 데이터 배열.

• newSelection- 행 선택의 새로운 상태와 일치하는 행 데이터 배열.

• added- 현재 선택에 추가된 행 데이터 배열.

• removed- 이전 선택 상태에 따라 현재 제거된 행 데이터 배열.

• event- 행 선택 변경을 유발한 원래 이벤트.

• cancel- 행 선택 변경을 방지할 수 있습니다.

• owner- 이벤트가 자식 그리드에서 트리거된다면, 이벤트가 방출되는 컴포넌트에 대한 참조를 제공합니다.

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

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

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

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

/* selectionExample.component.ts */

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

Select all rows

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

Note

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

Deselect all rows

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

How to get selected rows

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

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

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

// arrays of row IDs
public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri'];
public childSelectedRows = ['Initiation', 'Emergency'];

<igx-hierarchical-grid primaryKey="Artist" rowSelection="multiple" [autoGenerate]="false" [selectedRows]="mySelectedRows" [data]="data">
    <igx-column field="Artist"></igx-column>
    <igx-row-island [key]="'Albums'" rowSelection="multiple">
        <igx-column field="Album"></igx-column>
        <igx-column field="LaunchDate"></igx-column>
    </igx-row-island>
</igx-hierarchical-grid>

Row selector templates

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

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

행 템플릿

사용자 지정 행 선택 템플릿을 만들려면, 그igx-hierarchical-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-hierarchical-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 직접 확인해 보세요.

Note

​rowContext.select()그리고rowContext.deselect() 메서드는 템플릿 문맥igx-hierarchical-grid에서 노출됩니다. 특히 자식 그리드에서 현재 행을 토글하기 쉽게 만들어 줍니다. 기본 기능을 덮어쓰는 클릭 핸들러를 구현하면 더욱 그렇습니다.

Header template

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

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

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

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

<igx-hierarchical-grid [data]="hGridData" primaryKey="ProductID">
    <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-row-island [key]="'ProductInfo'">
        <ng-template igxHeadSelector let-childHeadContext>
            <!-- header template goes here -->
        </ng-template>
        <ng-template igxRowSelector let-childRowContext>
            <!-- row template goes here -->
        </ng-template>
    </igx-row-island>
</igx-hierarchical-grid>

각igx-hierarchical-grid 계층 구조는 자체 행과 헤더 템플릿을 가질 수 있습니다.

Note

​headContext.selectAll()그리고headContext.deselectAll() 메서드는 템플릿 문맥igx-hierarchical-grid에서 노출됩니다. 기본 기능을 덮어쓰는 클릭 핸들러를 구현하면 특히 자식 그리드에서 모든 행을 토글하는 것이 더 쉬워집니다.

Row Numbering Demo

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

Conditional Selection Demo

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

API References

• IgxHierarchicalGridComponent API_IgxGridRow API
• IgxGridCell API
• IgxHierarchicalGridComponent Styles

Additional Resources

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

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

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