계층형 그리드 열 재정렬 및 이동
Ignite UI for Angular의 Hierarchical Grid 구성 요소는 표준 드래그/드롭 마우스 또는 터치 제스처 또는 Column Moving API를 사용하여 열을 재정렬할 수 있는 Column Moving 기능을 제공합니다. 열 이동은 고정된 열과 고정되지 않은 열, 그리고 다중 열 헤더에서 모두 작동합니다. 열을 고정된 영역으로 이동하면 열이 고정되고 그 반대의 경우도 마찬가지이며, 열을 고정된 영역 밖으로 이동하면 열의 고정이 해제됩니다.
열과 열 그룹 간의 재정렬은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 그룹에 있는 경우에만 허용됩니다. 최상위 열인 경우 열/열 그룹 간 이동이 허용됩니다.
열 헤더가 템플릿화되어 있고 열 이동이 활성화되어 있거나 해당 열이 그룹화 가능한 경우 템플릿 요소는 draggable 속성을 false 로 설정해야 합니다! 이를 통해 요소에서 발생하는 모든 이벤트에 대한 핸들러를 연결할 수 있습니다. 그렇지 않으면 이벤트가 igxDrag
지시어에 의해 소비됩니다.
고정된 영역이 최대 허용 너비(전체 계층적 그리드 너비의 80%)를 초과하는 경우 시각적 단서가 최종 사용자에게 놓기 작업이 금지되어 고정이 불가능함을 알려줍니다. 즉, 고정된 영역에 열을 놓을 수 없습니다.
<ng-template igxHeader >
<igx-icon [attr.draggable ]="false" (click )="onClick()" > </igx-icon >
</ng-template >
html
Angular 계층형 그리드 열 이동 개요 예
import { Component } from '@angular/core' ;
import { IgxColumnComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent } from 'igniteui-angular' ;
import { CUSTOMERS } from '../../data/hierarchical-data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-moving' ,
styleUrls : ['./hierarchical-grid-moving.component.scss' ],
templateUrl : 'hierarchical-grid-moving.component.html' ,
imports : [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent]
})
export class HGridColumnMovingSampleComponent {
public localdata;
constructor ( ) {
this .localdata = CUSTOMERS;
}
public toggleColumn (col: IgxColumnComponent ) {
col.pinned ? col.unpin() : col.pin();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" #hierarchicalGrid [moving ]="true" [data ]="localdata" [height ]="'630px'" [width ]="'100%'" >
<igx-paginator [perPage ]="15" > </igx-paginator >
<igx-column #customerid field ="CustomerID" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > CustomerID</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(customerid)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #companyname field ="CompanyName" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > CompanyName</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(companyname)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #contactname field ="ContactName" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > ContactName</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(contactname)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #contacttitle field ="ContactTitle" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > ContactTitle</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(contacttitle)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #address field ="Address" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Address</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(address)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #city field ="City" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > City</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(city)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #postalcode field ="PostalCode" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > PostalCode</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(postalcode)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #country field ="Country" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Country</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(country)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #phone field ="Phone" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Phone</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(phone)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #fax field ="Fax" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Fax</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(fax)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-row-island [height ]="null" [key ]="'Orders'" [autoGenerate ]="false" [moving ]="true" >
<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 field ="ShippedDate" [dataType ]="'date'" > </igx-column >
<igx-column field ="ShipVia" > </igx-column >
<igx-column field ="Freight" > </igx-column >
<igx-column field ="ShipName" > </igx-column >
<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-row-island [height ]="null" [key ]="'OrderDetails'" [autoGenerate ]="false" [moving ]="true" >
<igx-column field ="ProductID" > </igx-column >
<igx-column field ="UnitPrice" > </igx-column >
<igx-column field ="Quantity" > </igx-column >
<igx-column field ="Discount" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー @import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css" );
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css" );
@import url("https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css" );
.header-icon {
font-size : 1.1em ;
width : 1.1em ;
height : 1.1em ;
float : right;
cursor : pointer;
}
.header {
height : 100% ;
}
:host ::ng-deep .title {
width: 100% ;
}
.pin-icon {
margin-left : 8px ;
font-size : 14px ;
cursor : pointer;
display : flex;
align-items : center;
color : #999 ;
&:hover {
color : #444
}
}
:host{
::ng-deep{
.igx-grid__th--pinned {
.pin-icon {
color: #444 ;
&:hover {
color : #999
}
}
}
}
}
.title-inner {
display: flex;
justify-content : space-between;
align-items : center;
}
.grid__wrapper {
margin : 0 auto;
padding : 16px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
개요
열 이동 기능은 그리드별 수준에서 활성화됩니다. 즉, igx-hierarchical-grid에는 이동 가능하거나 이동 불가능한 열이 있을 수 있습니다. 이는 igx-grid
의 moving
입력을 통해 수행됩니다.
<igx-hierarchical-grid [moving ]="true" >
...
<igx-row-island [moving ]="true" > </igx-row-island >
</igx-hierarchical-grid >
html
API
끌어서 놓기 기능 외에도 열 이동 기능은 프로그래밍 방식으로 열 이동/열 재정렬을 허용하는 두 가지 API 메서드도 제공합니다.
moveColumn
- 다른 열(대상) 앞이나 뒤로 열을 이동합니다. 첫 번째 매개변수는 이동할 컬럼이고, 두 번째 매개변수는 대상 컬럼입니다. 또한 대상 열 앞이나 뒤에 열을 배치할지 여부를 결정하는 선택적인 세 번째 매개 변수 position
(DropPosition
값을 나타냄)를 허용합니다.
const idColumn = grid.getColumnByName("ID" );
const nameColumn = grid.getColumnByName("Name" );
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
typescript
move
- 열을 지정된 표시 인덱스로 이동합니다. 전달된 인덱스 매개변수가 유효하지 않은 경우(음수이거나 열 수를 초과하는 경우) 또는 열이 이 인덱스로 이동할 수 없는 경우(다른 그룹 내에 있는 경우) 작업이 수행되지 않습니다.
const idColumn = grid.getColumnByName("ID" );
idColumn.move(3 );
typescript
API를 사용할 때 작업이 성공하면 columnMovingEnd
이벤트만 발생합니다. 또한 드래그 앤 드롭 기능과 비교하여 API를 사용하면 moving
속성을 true로 설정할 필요가 없습니다.
이벤트
열의 끌어서 놓기 작업을 탭하기 위한 수단을 제공하기 위해 열 이동과 관련된 여러 이벤트가 있습니다. 이들은 columnMovingStart
, columnMoving
및 columnMovingEnd
입니다. igx-hierarchical-grid
의 columnMovingEnd
이벤트를 구독하면 열이 새 위치로 삭제될 때 일부 사용자 지정 논리를 구현할 수 있습니다. 예를 들어, Change On Year(%) 열 이후에 범주 삭제를 취소할 수 있습니다.
<igx-hierarchical-grid #hierarchicalGrid [data ]="data" [autoGenerate ]="false" [moving ]="true" (columnMovingEnd )="onColumnMovingEnd($event)" >
<igx-column [field ]="'Country'" > </igx-column >
<igx-column [field ]="'Phone'" [dataType ]="'number'" > </igx-column >
</igx-hierarchical-grid >
html
public onColumnMovingEnd (event ) {
if (event.source.field === "Phone" && event.target.field === "Country" ) {
event.cancel = true ;
}
}
typescript
스타일링
계층적 그리드 열 이동 헤더의 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
scss
가장 간단한 접근 방식에 따라 grid-theme
확장하고 $ghost-header-background
, $ghost-header-text-color
및 $ghost-header-icon-color
매개변수를 허용하는 새로운 테마를 만듭니다.
$dark-grid-column-moving-theme : grid-theme(
$ghost-header-text-color : #f4d45c ,
$ghost-header-background : #575757 ,
$ghost-header-icon-color : #f4bb5c
);
scss
우리가 방금 한 것처럼 색상 값을 하드 코딩하는 대신, and color
함수를 사용하여 palette
색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 지침은 항목을 참조하십시오 Palettes
.
마지막 단계는 해당 테마와 함께 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($dark-grid-column-moving-theme );
scss
데모
import { Component } from '@angular/core' ;
import { IgxColumnComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent } from 'igniteui-angular' ;
import { CUSTOMERS } from '../../data/hierarchical-data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-moving-styled' ,
styleUrls : ['./hierarchical-grid-moving-styled.component.scss' ],
templateUrl : 'hierarchical-grid-moving-styled.component.html' ,
imports : [IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent, IgxRowIslandComponent]
})
export class HGridColumnMovingSampleStyledComponent {
public localdata;
constructor ( ) {
this .localdata = CUSTOMERS;
}
public toggleColumn (col: IgxColumnComponent ) {
col.pinned ? col.unpin() : col.pin();
}
}
ts コピー <div class ="grid__wrapper" >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" #hierarchicalGrid [data ]="localdata" [moving ]="true" [height ]="'630px'" [width ]="'100%'" >
<igx-paginator [perPage ]="15" > </igx-paginator >
<igx-column #customerid field ="CustomerID" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > CustomerID</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(customerid)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #companyname field ="CompanyName" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > CompanyName</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(companyname)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #contactname field ="ContactName" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > ContactName</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(contactname)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #contacttitle field ="ContactTitle" width ="150px" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > ContactTitle</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(contacttitle)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #address field ="Address" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Address</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(address)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #city field ="City" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > City</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(city)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #postalcode field ="PostalCode" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > PostalCode</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(postalcode)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #country field ="Country" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Country</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(country)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #phone field ="Phone" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Phone</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(phone)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-column #fax field ="Fax" >
<ng-template igxHeader >
<div class ="title-inner" >
<span style ="float:left" > Fax</span >
<igx-icon class ="pin-icon" [attr.draggable ]="false" family ="fas" name ="fa-thumbtack" (click )="toggleColumn(fax)" > </igx-icon >
</div >
</ng-template >
</igx-column >
<igx-row-island [height ]="null" [key ]="'Orders'" [autoGenerate ]="false" [moving ]="true" >
<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 field ="ShippedDate" [dataType ]="'date'" > </igx-column >
<igx-column field ="ShipVia" > </igx-column >
<igx-column field ="Freight" > </igx-column >
<igx-column field ="ShipName" > </igx-column >
<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-row-island [height ]="null" [key ]="'OrderDetails'" [autoGenerate ]="false" [moving ]="true" >
<igx-column field ="ProductID" > </igx-column >
<igx-column field ="UnitPrice" > </igx-column >
<igx-column field ="Quantity" > </igx-column >
<igx-column field ="Discount" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
</div >
html コピー @use "layout.scss" ;
@use "igniteui-angular/theming" as *;
$dark-grid-column-moving-theme : grid-theme(
$ghost-header-text-color : #f4d45c ,
$ghost-header-background : #575757 ,
$ghost-header-icon-color : #f4bb5c
);
@include css-vars($dark-grid-column-moving-theme );
scss コピー
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.