다중 선택 계층적 드롭다운
다음 샘플은 사용자가 트리 스타일 계층적 드롭다운 목록에서 단일 또는 여러 옵션을 선택할 수 있는 다중 선택 계층적 드롭다운을 만드는 방법을 보여줍니다.
주제 개요
드롭다운 목록의 경우 IgxDropDownComponent 와 IgxToggleActionDirective를 사용하여 드롭다운을 열고 닫습니다.
드롭다운에서 계층적 데이터를 시각화하려면 IgxTreeComponent 또는 IgxTreeGridComponent 를 사용할 수 있습니다.
IgxChipComponent
는 선택한 항목을 표시하는 데 사용됩니다.
선택
목록에서 선택한 노드/행을 표시하려면 IgxChipComponent
선택 변경 사항을 알리고 채우는 이벤트를 처리하여 selectedNodes
/ selectedRows
정렬. 이는 IgxTreeComponent의 구독을 통해 수행할 수 있습니다. nodeSelection
이벤트 및 IgxTreeGridComponent의 rowSelectionChanging
이벤트.
DOM에서 칩을 제거하고 트리/그리드에서 항목을 선택 취소하려면 IgxChipComponent의 remove
이벤트를 처리해야 합니다.
또한 칩 삭제 시 드롭다운이 닫히는 것을 방지하는 방법은 igx-chip
노드에 대한 이벤트의 복합 경로를 확인한 다음 IgxDropDownComponent
의 closing
이벤트 핸들러에서 이벤트를 취소하는 것입니다.
데모
import { AfterViewInit, Component, DoCheck, OnInit, ViewChild,ElementRef } from '@angular/core' ;
import { IBaseChipEventArgs, IgxDropDownComponent, IgxTreeComponent, ITreeNodeSelectionEvent, ConnectedPositioningStrategy, OverlaySettings, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxTreeNodeComponent } from 'igniteui-angular' ;
import { COUNTRIES } from './countries' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-dropdown-tree-hierarchical-selection' ,
styleUrls : ['./dropdown-tree-hierarchical-selection.component.scss' ],
templateUrl : './dropdown-tree-hierarchical-selection.component.html' ,
imports : [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxDropDownComponent, IgxTreeComponent, IgxTreeNodeComponent]
})
export class DropdownTreeHierarchicalSelectionComponent implements OnInit , DoCheck , AfterViewInit {
@ViewChild (IgxTreeComponent, { static : true }) public igxTree: IgxTreeComponent;
@ViewChild (IgxDropDownComponent, { static : true }) public igxDropDown: IgxDropDownComponent;
@ViewChild ('button' , { static : true }) public igxButton: ElementRef;
public countries!: any [];
public selectedNodes!: any [];
public ngOnInit(): void {
this .countries = COUNTRIES;
}
public ngAfterViewInit(): void {
requestAnimationFrame(() => {
this ._overlaySettings.target = this .igxButton.nativeElement;
this .igxDropDown.open(this ._overlaySettings);
});
}
public ngDoCheck ( ) {
this .selectedNodes = this .igxTree.nodes?.filter(node => node.selected == true );
}
public onNodeSelection (args: ITreeNodeSelectionEvent ) {
this .selectedNodes = args.newSelection;
}
public chipRemoved (event: IBaseChipEventArgs ) {
this .selectedNodes = this .selectedNodes.filter((node ) => {
if (node.data.ID === event.owner.id){
this .igxTree.deselectAll([node]);
}
return node.data.ID !== event.owner.id;
});
}
public _overlaySettings: OverlaySettings = {
modal : false ,
positionStrategy : new ConnectedPositioningStrategy(),
closeOnOutsideClick : false
};
}
ts コピー <button class ="button" #button igxButton ="contained" [igxToggleAction ]="countriesDropDown"
[igxDropDownItemNavigation ]="countriesDropDown" >
Countries<igx-icon fontSet ="material" > expand_more</igx-icon >
</button >
<div class ="chip-container" >
<igx-chips-area >
<igx-chip *ngFor ="let node of selectedNodes" [id ]="node.data.ID" [removable ]="true" (remove )="chipRemoved($event)" > {{node.data.Name}}</igx-chip >
</igx-chips-area >
</div >
<igx-drop-down #countriesDropDown [height ]="'400px'" [width ]="'250px'" >
<igx-tree #igxTree selection ="BiState" (nodeSelection )="onNodeSelection($event)" >
<igx-tree-node *ngFor ="let country of countries" [data ]="country" [expanded ]="true" [selected ]="true" >
{{ country.Name }}
<igx-tree-node *ngFor ="let city of country.Cities" [data ]="city" >
{{ city.Name }}
</igx-tree-node >
</igx-tree-node >
</igx-tree >
</igx-drop-down >
html コピー .chip-container {
width : 500px ;
overflow : auto;
border : 1px solid #ccc ;
background-color : #FFFBFA ;
display : inline-flex;
margin-left :10px ;
}
igx-chip {
margin-right : 5px ;
margin-bottom : 5px ;
}
.button {
width : 250px ;
border : #ccc ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
import { AfterViewInit, Component,ElementRef, OnInit, ViewChild } from '@angular/core' ;
import { IBaseChipEventArgs, IgxDropDownComponent, OverlaySettings, IgxTreeGridComponent, IRowSelectionEventArgs, ConnectedPositioningStrategy, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, IgxChipComponent, IgxColumnComponent } from 'igniteui-angular' ;
import { EMPLOYEE_DATA } from './nested-employee-data' ;
import { NgFor } from '@angular/common' ;
@Component ({
selector : 'app-dropdown-tree-grid-hierarchical-selection' ,
styleUrls : ['./dropdown-tree-grid-hierarchical-selection.component.scss' ],
templateUrl : './dropdown-tree-grid-hierarchical-selection.component.html' ,
imports : [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxDropDownComponent, IgxTreeGridComponent, IgxColumnComponent]
})
export class DropdownTreeGridHierarchicalSelectionComponent implements OnInit , AfterViewInit {
@ViewChild ('treeGrid' , { static : true })
public igxTreeGrid: IgxTreeGridComponent;
@ViewChild (IgxDropDownComponent, { static : true }) public igxDropDown: IgxDropDownComponent;
@ViewChild ('button' , { static : true }) public igxButton: ElementRef;
public employees!: any [];
public selectedRows!: any [];
public ngOnInit(): void {
this .employees = EMPLOYEE_DATA;
this .igxTreeGrid.selectRows([1 ,4 ], true );
this .selectedRows = [];
this .igxTreeGrid.selectedRows.forEach((row ) => this .selectedRows.push(this .employees.find(employee => employee.ID == row)));
}
public ngAfterViewInit(): void {
requestAnimationFrame(() => {
this ._overlaySettings.target = this .igxButton.nativeElement;
this .igxDropDown.open(this ._overlaySettings);
});
}
public onRowSelectionChanging (args: IRowSelectionEventArgs, grid: IgxTreeGridComponent ) {
this .selectedRows = [];
args.newSelection.forEach((val ) => this .selectedRows.push(grid.getRowData(val.ID)));
}
public chipRemoved (event: IBaseChipEventArgs ) {
this .selectedRows = this .selectedRows.filter((row ) => {
if (row.ID === event.owner.id){
this .igxTreeGrid.deselectRows([row.ID]);
}
return row.ID !== event.owner.id;
});
}
public _overlaySettings: OverlaySettings = {
modal : false ,
positionStrategy : new ConnectedPositioningStrategy(),
closeOnOutsideClick : false
};
}
ts コピー <button #button igxButton ="contained" [igxToggleAction ]="employeesDropDown" [igxDropDownItemNavigation ]="employeesDropDown" >
Employees<igx-icon fontSet ="material" > expand_more</igx-icon >
</button >
<div class ="chip-container" >
<igx-chips-area >
<igx-chip *ngFor ="let row of selectedRows" [id ]="row.ID" [removable ]="true" (remove )="chipRemoved($event)" > {{row.Name}}</igx-chip >
</igx-chips-area >
</div >
<igx-drop-down #employeesDropDown [width ]="'300px'" >
<igx-tree-grid #treeGrid igxPreventDocumentScroll [data ]="employees" childDataKey ="Employees" primaryKey ="ID"
width ="100%" height ="400px" [autoGenerate ]="false" [expansionDepth ]="1" [rowSelection ]="'multiple'"
(rowSelectionChanging )="onRowSelectionChanging($event, treeGrid)" >
<igx-column field ="Name" dataType ="string" > </igx-column >
</igx-tree-grid >
</igx-drop-down >
html コピー .chip-container {
width : 500px ;
overflow : auto;
border : 1px solid #ccc ;
background-color : #FFFBFA ;
display : inline-flex;
margin-left :10px ;
}
igx-chip {
margin-right : 5px ;
margin-bottom : 5px ;
}
button {
width : 300px ;
border : #ccc ;
}
scss コピー
처음에 열린 Dropdown 구성 요소를 표시하려면 open 메서드를 requestAnimationFrame 메서드의 콜백으로 설정하는 것이 좋습니다. 이렇게 하면 DOM 트리가 다시 그려지고 모든 요소가 올바르게 배치됩니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.