Tree Grid 다중 셀 선택
다중 셀 선택은 Tree Grid에서 셀의 범위 선택을 가능하게 합니다. 다양한 다중 셀 선택 기능을 사용할 수 있습니다.
마우스 드래그- 직사각형으로 셀 선택을 실행합니다.Ctrl 키누름 +마우스 드래그- 여러 범위 선택을 실행합니다. 다른 기존 셀 선택은 유지됩니다.- Shift 키를 사용하여 다중 셀을 인스턴스화합니다. Shift 키를 누른 상태에서 단일 셀을 선택하고 다른 단일 셀을 선택합니다. 2개 셀 사이의 셀 범위가 선택됩니다.
Shift 키를 누른 상태에서 다른 두 번째 셀을 선택하면 첫 번째 선택된 셀 위치(시작점)를 기준으로 셀 선택 범위가 업데이트됩니다. Shift 키를 누른 상태에서화살표 키를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다.Shift 키를 누른 상태에서Ctrl + 화살표 키와Ctrl + Home/End를 사용하여 키보드로 다중 셀을 선택합니다. 다중 셀 선택 범위는 포커스된 셀을 기반으로 생성됩니다.Ctrl 키를 누른 상태에서왼쪽 마우스 키를 클릭하면 선택한 셀 컬렉션에 단일 셀 범위가 추가됩니다.- 마우스로 클릭하고 드래그하면 연속해 다중 셀 선택이 가능합니다.
데모
키보드 탐색 상호 작용
Shift 키를 누른 상태에서
- Shift + 위 화살표 - 현재 선택에 위 셀을 추가합니다.
- Shift + 아래 화살표 - 현재 선택에 아래 셀을 추가합니다.
- Shift + 왼쪽 화살표 - 현재 선택에 왼쪽 셀을 추가합니다.
- Shift + 오른쪽 화살표 - 현재 선택에 오른쪽 셀을 추가합니다.
Ctrl + Shift 키를 누른 상태에서
- Ctrl + Shift + 위 화살표 - 열에서 포커스된 셀 위에 있는 모든 셀을 선택합니다.
- Ctrl + Shift + 아래 화살표 - 열에서 포커스된 셀 아래에 있는 모든 셀을 선택합니다.
- Ctrl + Shift + 왼쪽 화살표 - 행의 시작 부분까지 모든 셀을 선택합니다.
- Ctrl + Shift + 오른쪽 화살표 - 행의 마지막 부분까지 모든 셀을 선택합니다.
- Ctrl + Shift + Home - 포커스된 셀에서 그리드의 첫 번째 셀까지의 모든 셀을 선택합니다
- Ctrl + Shift + End - 포커스된 셀에서 그리드의 마지막 셀까지의 모든 셀을 선택합니다.
Note
그리드 보디에서만 연속 스크롤이 가능합니다.
API 사용
다음은 범위 선택, 선택 취소 또는 선택한 셀 데이터를 가져오기에 사용할 수 있는 방법입니다.
선택 범위
selectRange(range) - API를 사용하여 셀 범위를 선택합니다. rowStart 및 rowEnd는 행 인덱스를 사용해야 하며, columnStart 및 columnEnd는 열 인덱스 또는 열 데이터 필드 값을 사용할 수 있습니다.
const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...
const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);
Note
선택 범위는 부가 연산입니다. 이전 선택을 삭제하지 않습니다.
셀 선택 삭제
clearCellSelection()은 현재 셀 선택을 삭제합니다.
선택한 데이터 가져오기
getSelectedData()은 선택한 데이터의 배열을 선택 내용에 따라 형식으로 반환합니다. 이하 예:
- 3개의 다른 단일 셀을 선택한 경우:
expectedData = [
{ CompanyName: "Infragistics" },
{ Name: "Michael Langdon" },
{ ParentID: 147 }
];
- 1열에서 3개 셀을 선택한 경우:
expectedData = [
{ Address: "Obere Str. 57"},
{ Address: "Avda. de la Constitución 2222"},
{ Address: "Mataderos 2312"}
];
- 1행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
expectedData = [
{ Address: "Avda. de la Constitución 2222", City: "México D.F.", ContactTitle: "Owner" }
];
- 2행 3열에서 마우스 드래그로 3개 셀을 선택한 경우:
expectedData = [
{ ContactTitle: "Sales Agent", Address: "Cerrito 333", City: "Buenos Aires"},
{ ContactTitle: "Marketing Manager", Address: "Sierras de Granada 9993", City: "México D.F."}
];
- 2개의 다른 범위를 선택한 경우:
expectedData = [
{ ContactName: "Martín Sommer", ContactTitle: "Owner"},
{ ContactName: "Laurence Lebihan", ContactTitle: "Owner"},
{ Address: "23 Tsawassen Blvd.", City: "Tsawassen"},
{ Address: "Fauntleroy Circus", City: "London"}
];
- 2개의 중복 범위가 선택되면 형식은 다음과 같이 됩니다:
expectedData = [
{ ContactName: "Diego Roel", ContactTitle: "Accounting Manager", Address: "C/ Moralzarzal, 86"},
{ ContactName: "Martine Rancé", ContactTitle: "Assistant Sales Agent", Address: "184, chaussée de Tournai", City: "Lille"},
{ ContactName: "Maria Larsson", ContactTitle: "Owner", Address: "Åkergatan 24", City: "Bräcke"},
{ ContactTitle: "Marketing Manager", Address: "Berliner Platz 43", City: "München"}
];
Note
selectedCells() will DO return the correct result even if the cell is not visible in grids view port. getSelectedData() will also return the selected cell data.
getSelectedRanges(): GridSelectionRange[]는 키보드와 포인터 상호 작용으로 그리드에서 현재 선택된 범위를 반환합니다. 유형은 GridSelectionRange[]입니다.
기능 통합
다중 셀 선택은 인덱스 기반입니다(DOM 요소 선택).
Sorting- 정렬이 실행되면 선택 항목은 삭제되지 않습니다. 오름차순 또는 내림차순으로 정렬하는 동안 현재 선택된 셀은 그대로 유지됩니다.Paging- 페이징 시 선택된 셀은 삭제됩니다. 선택은 페이지를 넘어서 유지되지 않습니다.Filtering- 필터링이 실행되면 선택 항목은 삭제되지 않습니다. 필터링이 삭제된 경우에는 처음 선택한 셀이 반환됩니다.Resizing- 열 크기를 변경 시 선택한 셀이 삭제되지 않습니다.Hiding- 선택한 셀은 삭제되지 않습니다. 열이 비표시된 경우에는 다음에 표시되는 열의 셀이 선택됩니다.Pinning- 선택한 셀은 삭제되지 않습니다. 숨기기와 동일합니다Group by- 열 그룹화 시 선택한 셀은 삭제되지 않습니다.
Tree Grid 행 선택
Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크 박스가 있습니다. 사용자가 체크 박스를 클릭하면 행을 선택하거나 선택 취소할 수 있고 사용자가 데이터를 포함한 복수의 행을 선택할 수 있습니다.
데모
설정
단일 선택
Tree Grid의 단일 선택은 Tree Grid의 selected 이벤트를 사용하여 간단하게 설정할 수 있습니다. 이 이벤트는 셀 컴포넌트에 대한 참조를 내보냅니다. 셀 컴포넌트에는 포함되는 행 컴포넌트에 대한 참조가 있습니다. 행 컴포넌트 참조의 key 게터를 사용하여 행(data[primaryKey] 또는 data 객체 자체를 사용하여)의 고유 식별자를 선택의 적절한 목록에 전달합니다. 단일 행만 항상 선택되도록 하기 위해 선택 행 선택 목록을 미리 비웁니다(selectRows 메소드 호출의 두 번째 인수):
<!-- selectionExample.component.html -->
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" [height]="'530px'" width="100%"
[rowSelectable]="selection" [allowFiltering]="true" (selected)="handleRowSelection($event)">
...
</igx-tree-grid>
/* selectionExample.component.ts */
public handleRowSelection(event) {
const targetCell = event.cell;
if (!this.selection) {
this.treeGrid.deselectAllRows();
this.treeGrid.selectRows([targetCell.row.key]);
}
}
복수 선택
복수 행 선택을 사용하도록 하기 위해 igx-tree-grid의 rowSelectable 속성을 사용합니다. rowSelectable을 true로 설정하면 각 행 및 Tree Grid 헤더에서 체크 박스 필드를 선택할 수 있게 됩니다. 체크 박스를 사용하여 복수의 행을 선택할 수 있으며 스크롤, 페이징 및 정렬 및 필터링 등의 데이터 조작을 통해 선택이 유지됩니다.
<!-- selectionExample.component.html -->
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [height]="'530px'" width="100%" [autoGenerate]="false" [rowSelectable]="selection" [allowFiltering]="true" (selected)="handleRowSelection($event)">
...
</igx-tree-grid>
/* selectionExample.component.ts */
public selection = true;
참고: 필터링이 설정된 경우, selectAllRows() 및 deselectAllRows()는 필터링된 모든 행을 선택/선택 취소합니다.
참고: 셀 선택은 rowSelectionChanging가 아닌 selected이 트리거됩니다.
코드 조각
프로그래밍 방식으로 행을 선택
다음의 코드 예제를 사용하여 단일 또는 복수 행을 동시에 선택할 수 있습니다(primaryKey를 사용하여):
<!-- selectionExample.component.html -->
<igx-tree-grid ... [primaryKey]="'ID'">
...
</igx-tree-grid>
...
<button (click)="this.treeGrid.selectRows([1,2,5])">Select 1,2 and 5</button>
이렇게 하면 ID 1, 2 및 5가 있는 데이터 항목에 해당하는 행을 Tree Grid 선택에 추가할 수 있습니다.
선택 이벤트 취소
<!-- selectionExample.component.html -->
<igx-tree-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-tree-grid>
/* selectionExample.component.ts */
public handleRowSelectionChange(args) {
args.newSelection = args.oldSelection; // overwrites the new selection, making it so that no new row(s) are entered in the selectionAPI
args.checked = false; // overwrites the checkbox state
}
API 참조
추가 리소스
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
GitHub