Angular 계층형 그리드 열 선택
열 선택 기능을 사용하면 한 번의 클릭으로 전체 열을 쉽게 선택할 수 있습니다. 헤더 셀과 아래의 모든 항목에 초점을 맞춰 특정 열의 중요성을 강조합니다. 이 기능에는 선택 상태 조작, 선택한 분수에서 데이터 추출, 데이터 분석 작업 및 시각화를 허용하는 풍부한 API
가 함께 제공됩니다.
Angular 열 선택 예제
아래 샘플은 계층적 그리드의 열 선택 동작의 세 가지 유형을 보여줍니다. 사용 가능한 각 선택 모드를 활성화하려면 아래 열 선택 드롭다운을 사용하세요.
* 사진 및 Debut 에는 열 선택이 비활성화되어 있습니다.
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core' ;
import { GridSelectionMode, IgxHierarchicalGridComponent, IgxGridToolbarComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { FormsModule } from '@angular/forms' ;
@Component ({
selector : 'app-hierarchical-grid-column-selection' ,
templateUrl : './hierarchical-grid-column-selection.component.html' ,
styleUrls : ['./hierarchical-grid-column-selection.component.scss' ],
imports : [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxSelectComponent, FormsModule, IgxLabelDirective, IgxSelectItemComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent]
})
export class HierarchicalGridColumnSelectionComponent implements OnInit , AfterViewInit {
@ViewChild (IgxHierarchicalGridComponent)
public hGrid: IgxHierarchicalGridComponent;
public data;
public currentColumnSelection: GridSelectionMode = 'single' ;
constructor (private cdr: ChangeDetectorRef ) {}
public formatter = (a ) => a;
public ngOnInit ( ) {
this .data = SINGERS;
}
public ngAfterViewInit ( ) {
this .hGrid.selectColumns(['Artist' ]);
this .cdr.detectChanges();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" [data ]="data" height ="530px" width ="100%"
[columnSelection ]="currentColumnSelection" >
<igx-grid-toolbar >
<igx-select [(ngModel )]="currentColumnSelection" >
<label igxLabel > Column Selection</label >
<igx-select-item value ="none" > None</igx-select-item >
<igx-select-item value ="single" > Single</igx-select-item >
<igx-select-item value ="multiple" > Mulitple</igx-select-item >
</igx-select >
</igx-grid-toolbar >
<igx-column field ="Artist" > </igx-column >
<igx-column field ="Photo" [selectable ]="false" >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" dataType ="number" [formatter ]="formatter" [selectable ]="false" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" [columnSelection ]="currentColumnSelection" >
<igx-column field ="Album" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [dataType ]="'date'" [selectable ]="false" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" [columnSelection ]="currentColumnSelection" >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" [selectable ]="false" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" [columnSelection ]="currentColumnSelection" >
<igx-column field ="Tour" [selectable ]="false" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" [selectable ]="false" > </igx-column >
<igx-column field ="Location" [selectable ]="false" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .photo {
vertical-align : middle;
max-height : 62px ;
}
.cell__inner_2 {
margin : 1px
}
.grid__wrapper {
padding: 16px ;
igx-select {
--ig-size: var(--ig-size-small);
}
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
기본 사용법
열 선택 기능은 다음을 통해 활성화할 수 있습니다. columnSelection
입력, 소요되는 그리드선택모드 가치.
상호 작용
기본 선택 모드는 none
입니다. single
또는 multiple
으로 설정하면 제시된 모든 열을 selectable
수 있습니다. 즉, 열을 선택하려면 하나를 클릭하면 selected
로 표시됩니다. 열을 선택할 수 없는 경우 마우스를 가져가는 동안 헤더에 선택 스타일이 적용되지 않습니다.
* 위치 열 그룹 아래에서는 도시 열만 선택할 수 있습니다.
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent } from 'igniteui-angular' ;
import { CUSTOMERS } from '../../data/hierarchical-data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-column-group-selection' ,
templateUrl : './hierarchical-grid-column-group-selection.component.html' ,
styleUrls : ['./hierarchical-grid-column-group-selection.component.scss' ],
imports : [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxColumnGroupComponent, IgxRowIslandComponent]
})
export class HierarchicalGridColumnGroupSelectionComponent implements OnInit , AfterViewInit {
@ViewChild (IgxHierarchicalGridComponent, { static : true })
private hGrid: IgxHierarchicalGridComponent;
public data;
constructor (private cdr: ChangeDetectorRef ) {}
public ngOnInit(): void {
this .data = CUSTOMERS;
}
public ngAfterViewInit ( ) {
this .hGrid.selectColumns(['CompanyName' , 'ContactName' , 'ContactTitle' , 'City' ]);
this .cdr.detectChanges();
}
}
ts コピー <div class ="grid-wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" [data ]="data" height ="530px" width ="100%"
columnSelection ="multiple" >
<igx-column field ="CustomerID" > </igx-column >
<igx-column-group header ="General Information" >
<igx-column field ="CompanyName" > </igx-column >
<igx-column-group header ="Personal Details" >
<igx-column field ="ContactName" > </igx-column >
<igx-column field ="ContactTitle" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-column-group header ="Address Information" >
<igx-column-group header ="Location" >
<igx-column field ="Address" [selectable ]="false" > </igx-column >
<igx-column field ="City" > </igx-column >
<igx-column field ="PostalCode" [selectable ]="false" > </igx-column >
<igx-column field ="Country" [selectable ]="false" > </igx-column >
</igx-column-group >
<igx-column-group header ="Contact Information" >
<igx-column field ="Phone" > </igx-column >
<igx-column field ="Fax" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-row-island [height ]="null" [key ]="'Orders'" [autoGenerate ]="false" columnSelection ="multiple" >
<igx-column-group header ="Order Information" >
<igx-column-group header ="Order Details" >
<igx-column field ="OrderID" > </igx-column >
<igx-column field ="EmployeeID" > </igx-column >
<igx-column field ="OrderDate" [dataType ]="'date'" > </igx-column >
<igx-column field ="RequiredDate" [dataType ]="'date'" > </igx-column >
</igx-column-group >
<igx-column-group header ="General Shipping Information" >
<igx-column field ="ShippedDate" [dataType ]="'date'" > </igx-column >
<igx-column field ="ShipVia" [selectable ]="false" > </igx-column >
<igx-column field ="Freight" [selectable ]="false" > </igx-column >
<igx-column field ="ShipName" > </igx-column >
</igx-column-group >
<igx-column-group header ="Shipping Location" >
<igx-column field ="ShipAddress" > </igx-column >
<igx-column field ="ShipCity" > </igx-column >
<igx-column field ="ShipPostalCode" > </igx-column >
<igx-column field ="ShipCountry" > </igx-column >
</igx-column-group >
</igx-column-group >
<igx-row-island [height ]="null" [key ]="'OrderDetails'" [autoGenerate ]="false" columnSelection ="single" >
<igx-column field ="ProductID" > </igx-column >
<igx-column field ="UnitPrice" > </igx-column >
<igx-column field ="Quantity" [selectable ]="false" > </igx-column >
<igx-column field ="Discount" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー .grid-wrapper {
padding : 16px ;
}
scss コピー
키보드 조합
열 선택 기능의 키보드 탐색에는 두 가지 시나리오가 있습니다.
다중 열 선택 - 보유 Ctrl 키 + 딸깍 하는 소리 매 선택 가능 헤더 셀.
범위 열 선택 -Shift 키를 누른 채 클릭하면 사이에서 선택 가능한 모든 열이 선택됩니다.
API 조작
그만큼 API 몇 가지 추가 기능을 제공합니다. 눈에 보이지 않는 열은 모든 숨겨진 열은 다음과 같이 표시될 수 있습니다. selected
해당 설정을 통해 세터 .
API 조작에 관한 자세한 내용은 API References
섹션에서 확인할 수 있습니다.
스타일링
스타일링 옵션을 살펴보기 전에 핵심 모듈과 모든 구성 요소 믹스인을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
이제 선택 및 호버 스타일을 변경해 보겠습니다. 가장 간단한 접근 방식에 따라 맞춤 테마를 정의해 보겠습니다.
$custom-grid-theme : grid-theme(
$row-selected-background : #011627 ,
$row-selected-text-color : #ecaa53 ,
$row-selected-hover-background : #011627 ,
$header-selected-text-color : #ecaa53 ,
$header-selected-background : #011627
);
scss
몇 grid-theme
가지 매개 변수를 허용하지만 선택한 모든 열의 모양을 변경하는 5 개의 매개 변수가 있습니다.
$row-selected-ground - 선택한 분수의 배경을 설정합니다.
$row-selected-text-color - 선택한 분수의 텍스트 색상을 설정합니다.
$row-selected-hover-ground - 호버링된 셀 또는 셀 묶음의 색상을 설정합니다.
$header-selected-text-color - 선택한 열 헤더의 텍스트 색상을 설정합니다.
$header-selected-ground - 선택한 열 헤더의 배경색을 설정합니다.
CSS 변수 사용
마지막 단계는 사용자 정의 igx-grid
테마를 포함하는 것입니다.
@include css-vars($custom-grid-theme )
scss
데모
import { AfterViewInit, ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core' ;
import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent } from 'igniteui-angular' ;
import { SINGERS } from '../../data/singersData' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-column-selection-styles' ,
templateUrl : './hierarchical-grid-column-selection-styles.component.html' ,
styleUrls : ['./hierarchical-grid-column-selection-styles.component.scss' ],
imports : [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxRowIslandComponent]
})
export class HGridColumnSelectionStylesComponent implements OnInit , AfterViewInit {
@ViewChild (IgxHierarchicalGridComponent)
public hGrid: IgxHierarchicalGridComponent;
public data;
constructor (private cdr: ChangeDetectorRef ) {}
public formatter = (a ) => a;
public ngOnInit ( ) {
this .data = SINGERS;
}
public ngAfterViewInit ( ) {
this .hGrid.selectColumns(['Artist' , 'GrammyNominations' ]);
this .cdr.detectChanges();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" [data ]="data" height ="530px" width ="100%"
columnSelection ="single" >
<igx-column field ="Artist" > </igx-column >
<igx-column field ="Photo" [selectable ]="false" >
<ng-template igxCell let-cell ="cell" >
<div class ="cell__inner_2" >
<img [src ]="cell.value" class ="photo" />
</div >
</ng-template >
</igx-column >
<igx-column field ="Debut" dataType ="number" [formatter ]="formatter" [selectable ]="false" > </igx-column >
<igx-column field ="GrammyNominations" header ="Grammy Nominations" > </igx-column >
<igx-column field ="GrammyAwards" header ="Grammy Awards" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Albums'" [autoGenerate ]="false" columnSelection ='multiple' >
<igx-column field ="Album" > </igx-column >
<igx-column field ="LaunchDate" header ="Launch Date" [dataType ]="'date'" [selectable ]="false" > </igx-column >
<igx-column field ="BillboardReview" header ="Billboard Review" > </igx-column >
<igx-column field ="USBillboard200" header ="US Billboard 200" > </igx-column >
<igx-row-island [height ]="null" [key ]="'Songs'" [autoGenerate ]="false" columnSelection ='multiple' >
<igx-column field ="Number" header ="No." > </igx-column >
<igx-column field ="Title" > </igx-column >
<igx-column field ="Released" dataType ="date" [selectable ]="false" > </igx-column >
<igx-column field ="Genre" > </igx-column >
</igx-row-island >
</igx-row-island >
<igx-row-island [height ]="null" [key ]="'Tours'" [autoGenerate ]="false" columnSelection ="single" >
<igx-column field ="Tour" [selectable ]="false" > </igx-column >
<igx-column field ="StartedOn" header ="Started on" [selectable ]="false" > </igx-column >
<igx-column field ="Location" [selectable ]="false" > </igx-column >
<igx-column field ="Headliner" > </igx-column >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$custom-grid-theme : grid-theme(
$row-selected-background : #011627 ,
$row-selected-text-color : #ecaa53 ,
$row-selected-hover-background : #011627 ,
$header-selected-text-color : #ecaa53 ,
$header-selected-background : #011627
);
:host ::ng-deep{
@include css-vars($custom-grid-theme );
}
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
열 선택 UI에는 아래에 나열된 몇 가지 API가 더 있습니다.
IgxHierarchicalGridComponent
properties:
IgxColumnComponent
properties:
IgxColumnGrpupComponent
properties:
IgxHierarchicalGridComponent
events:
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.