Angular 계층형 그리드에서 행 끌기
Ignite UI for Angular Hierarchical Grid에서 RowDrag 는 루트 igx-hierarchical-grid
구성 요소에서 초기화되며 입력을 통해 구성할 수 있습니다 rowDraggable
. 행 끌기를 활성화하면 사용자에게 행 끌기 핸들이 제공되어 행 끌기를 시작할 수 있습니다.
Angular 계층형 그리드 행 드래그 예제
import { Component, ViewChild } from '@angular/core' ;
import { IDropDroppedEventArgs, IgxHierarchicalGridComponent, RowType, IgxDropDirective, IgxIconComponent, IgxColumnComponent, IgxRowIslandComponent } from 'igniteui-angular' ;
import { createData, IDrive } from '../../data/files.data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
enum DragIcon {
DEFAULT = 'drag_indicator' ,
ALLOW = 'remove'
}
@Component ({
selector : 'app-hierarchical-row-drag-base' ,
styleUrls : ['./hierarchical-row-drag-base.component.scss' ],
templateUrl : 'hierarchical-row-drag-base.component.html' ,
imports : [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent]
})
export class HGridRowDragBaseComponent {
@ViewChild (IgxHierarchicalGridComponent, { read : IgxHierarchicalGridComponent, static : true })
public hGrid: IgxHierarchicalGridComponent;
public localData: IDrive[] = [];
constructor ( ) {
this .localData = createData(3 , 12 , 8 );
}
public onRowDragEnd (args ) {
args.animation = true ;
}
public onDropAllowed (args: IDropDroppedEventArgs ) {
const draggedRow: RowType = args.dragData;
draggedRow.delete();
}
public onEnterAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}
public onLeaveAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}
private changeGhostIcon (ghost, icon: string ) {
if (ghost) {
const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon' );
if (currentIcon) {
currentIcon.innerText = icon;
}
}
}
}
ts コピー <div class ="drop-area" igxDrop (enter )="onEnterAllowed($event)" (leave )="onLeaveAllowed($event)"
(dropped )="onDropAllowed($event)" >
<igx-icon > delete</igx-icon >
<div > Drag a row here to delete it</div >
</div >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [allowFiltering ]='true' #grid1 [data ]="localData" [primaryKey ]="'id'" [rowDraggable ]="true"
[height ]="'540px'" [width ]="'100%'" #hGrid (rowDragEnd )="onRowDragEnd($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="system" header ="Is System Drive" > </igx-column >
<igx-row-island [height ]="null" [rowDraggable ]="true" [primaryKey ]="'id'" igxDrop [key ]="'folders'" #layout1 >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="createdOn" header ="Created On" > </igx-column >
<igx-column field ="createdBy" header ="Created By" > </igx-column >
<igx-row-island [height ]="null" [rowDraggable ]="true" [primaryKey ]="'id'" igxDrop [key ]="'files'" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="extension" header ="Extension" > </igx-column >
<igx-column field ="size" header ="Size" dataType ="number" [hasSummary ]="true" > </igx-column >
<igx-column field ="createdBy" header ="createdBy" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
html コピー .drop-area {
width : 160px ;
height : 160px ;
background-color : #d3d3d3 ;
border : 1px dashed #131313 ;
display : flex;
justify-content : center;
align-items : center;
flex-flow : column;
text-align : center;
margin : 8px ;
}
:host {
display : flex;
justify-content : space-evenly;
align-items : center;
flex-flow : row;
width : 100% ;
padding-top : 10px ;
}
.igx-grid {
margin : 0 1rem ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
구성
igx-hierarchical-grid
에 대해 행 드래그를 활성화하려면 그리드의 rowDraggable
true
로 설정하기만 하면 됩니다. 이 기능이 활성화되면 행 끌기 핸들이 각 행에 표시됩니다. 이 핸들을 사용하여 행 끌기를 시작할 수 있습니다.
<igx-hierarchical-grid [rowDraggable ]="true" >
...
</igx-hierarchical-grid >
html
드래그 핸들을 클릭하고 버튼을 누른 채 커서를 움직이면 그리드의 rowDragStart
이벤트가 시작됩니다. 언제든지 클릭을 놓으면 rowDragEnd
이벤트가 발생합니다.
아래에서는 행 드래그를 지원하도록 igx-hierarchical-grid
구성하는 방법과 드롭 이벤트를 적절하게 처리하는 방법에 대한 연습을 찾을 수 있습니다.
이 예에서는 그리드에서 지정된 영역으로 행을 드래그하는 작업을 처리하고, 이를 놓을 때 그리드에서 제거합니다.
드롭 영역
행 드래그를 활성화하는 것은 매우 쉬웠지만 이제 행 삭제를 처리하는 방법을 구성해야 합니다. igxDrop
지시문을 사용하여 행을 삭제할 위치를 정의할 수 있습니다.
먼저 앱 모듈에서 IgxDragDropModule
을 가져와야 합니다.
import { ..., IgxDragDropModule } from 'igniteui-angular' ;
...
@NgModule ({
imports : [..., IgxDragDropModule]
})
typescript
그런 다음 템플릿에서 지시어 선택기를 사용하여 드롭 영역을 정의합니다.
<div class ="drop-area" igxDrop (enter )="onEnterAllowed($event)" (leave )="onLeaveAllowed($event)"
(dropped )="onDropAllowed($event)" >
<igx-icon > delete</igx-icon >
<div > Drag a row here to delete it</div >
</div >
html
다음을 사용하여 놓을 수 없는 영역에 행을 놓을 때 애니메이션을 활성화할 수 있습니다. animation
매개변수 rowDragEnd
이벤트. true로 설정하면 드래그된 행을 놓을 수 없는 영역 위에 놓으면 원래 위치로 다시 애니메이션이 적용됩니다.
다음과 같이 애니메이션을 활성화할 수 있습니다:
export class IgxHierarchicalGridRowDragComponent {
public onRowDragEnd (args ) {
args.animation = true ;
}
}
typescript
드롭 영역 이벤트 핸들러
템플릿에 놓기 영역을 정의한 후에는 해당 항목에 대한 핸들러를 선언해야 합니다. igxDrop
'에스 enter
, leave
그리고 dropped
우리 컴포넌트의 이벤트.ts
파일.
먼저, enter
및 leave
핸들러를 살펴보겠습니다. 이러한 방법에서는 드래그의 고스트 아이콘을 변경하여 사용자에게 행을 드롭할 수 있는 영역 위에 있음을 표시할 수 있습니다.
export class IgxHierarchicalGridRowDragComponent {
public onEnterAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}
public onLeaveAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}
private changeGhostIcon (ghost, icon: string ) {
if (ghost) {
const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon' );
if (currentIcon) {
currentIcon.innerText = icon;
}
}
}
}
typescript
changeGhostIcon
비공개 메소드는 드래그 고스트 내부의 아이콘을 변경합니다. 메서드의 로직은 드래그 표시기 컨테이너에 적용되는 igx-grid__drag-indicator
클래스를 사용하여 아이콘이 포함된 요소를 찾아 요소의 내부 텍스트를 전달된 텍스트로 변경합니다. 아이콘 자체는 material
글꼴 세트 에서 가져온 것이며 별도의 enum
에 정의됩니다.
enum DragIcon {
DEFAULT = 'drag_indicator' ,
ALLOW = 'remove'
}
typescript
다음으로 사용자가 실제로 놓기 영역 내부에 행을 놓을 때 어떤 일이 발생해야 하는지 정의해야 합니다.
export class IgxHierarchicalGridRowDragComponent {
public onDropAllowed (args: IDropDroppedEventArgs ) {
const draggedRow: RowType = args.dragData;
draggedRow.delete();
}
}
typescript
행이 삭제되면 해당 행의 delete()
메서드를 호출하기만 하면 됩니다.
이벤트 인수(args.dragData.data
) 또는 다른 행 속성의 행 데이터를 사용하는 경우 전체 행이 인수에 참조로 전달됩니다. 즉, 원하는 경우 필요한 데이터를 복제해야 합니다. 이를 소스 그리드의 것과 구별합니다.
드래그 고스트 템플릿 만들기
드래그 고스트는 igx-hierarchical-grid
본문 내부의 <ng-template>
에 적용되는 IgxRowDragGhost
지시문을 사용하여 템플릿화할 수 있습니다.
<igx-hierarchical-grid >
...
<ng-template igxRowDragGhost >
<div >
<igx-icon fontSet ="material" > arrow_right_alt</igx-icon >
</div >
</ng-template >
...
</igx-hierarchical-grid >
html
구성 결과는 행 드래그 및 다중 선택이 활성화된 igx-hierarchical-grid
에서 아래에 표시될 수 있습니다. 데모에서는 현재 드래그된 행의 개수를 보여줍니다.
예제 데모
드래그 고스트는 모든 그리드 수준에서 템플릿화할 수 있으므로 여러 고스트 템플릿을 가지거나 단일 행 아일랜드에 대한 템플릿만 제공할 수 있습니다.
<igx-hierarchical-grid >
...
<ng-template igxRowDragGhost >
<div >
<igx-icon fontSet ="material" > arrow_right_alt</igx-icon >
</div >
</ng-template >
<igx-row-island >
...
<ng-template IgxRowDragGhost >
<img src ="smile.gif" height ="42" width ="42" >
</ng-template >
</igx-row-island >
...
</igx-hierarchical-grid >
html
import { Component, ViewChild } from '@angular/core' ;
import { GridSelectionMode, IDropDroppedEventArgs, IgxHierarchicalGridComponent, RowType, IgxDropDirective, IgxColumnComponent, IgxRowIslandComponent, IgxRowDragGhostDirective, IgxIconComponent } from 'igniteui-angular' ;
import { createData, IDrive } from '../../data/files.data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-multi-row-drag' ,
styleUrls : ['./hierarchical-grid-multi-row-drag.component.scss' ],
templateUrl : 'hierarchical-grid-multi-row-drag.component.html' ,
imports : [IgxDropDirective, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxRowDragGhostDirective, IgxIconComponent]
})
export class HGridMultiRowDragComponent {
@ViewChild (IgxHierarchicalGridComponent, { read : IgxHierarchicalGridComponent, static : true })
public hGrid: IgxHierarchicalGridComponent;
public localData: IDrive[] = [];
public selectionMode: GridSelectionMode = 'multiple' ;
public ids;
public grid;
public selected = false ;
public countIcon = 'drag_indicator' ;
public dragIcon = 'keyboard_backspace' ;
constructor ( ) {
this .localData = createData(3 , 12 , 8 );
}
public onRowDragEnd (args ) {
args.animation = true ;
}
public handleRowSelectionChange (args ) {
this .ids = args.newSelection;
this .grid = args.owner;
this .selected = this .ids.length !== 0 ;
}
public onDropAllowed (args: IDropDroppedEventArgs ) {
if (this .selected === false ) {
const draggedRow: RowType = args.dragData;
draggedRow.delete();
} else {
if (this .grid == null ) {
this .ids.forEach((rowData ) => {
this .hGrid.deleteRow(rowData);
});
this .selected = false ;
} else {
this .ids.forEach((rowData ) => {
this .grid.deleteRow(rowData);
});
this .selected = false ;
}
}
}
public onRowDragStart (args ) {
if (this .selected === false ) {
this .countIcon = `filter_1` ;
} else {
const count = this .ids.length;
this .countIcon = `filter_${count > 9 ? '9_plus' : `${count} ` } ` ;
}
}
public onLeaveAllowed (args ) {
this .onRowDragStart(args);
this .dragIcon = 'keyboard_backspace' ;
}
public onEnterAllowed (args ) {
this .dragIcon = 'remove' ;
}
}
ts コピー <div class ="drop-area" igxDrop (enter )="onEnterAllowed($event)" (leave )="onLeaveAllowed($event)"
(dropped )="onDropAllowed($event)" >
<div > Drag a row here to delete it</div >
</div >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [allowFiltering ]='true' #grid1 [data ]="localData" [primaryKey ]="'id'" [rowDraggable ]="true"
[height ]="'580px'" [width ]="'100%'" #hGrid (rowDragStart )="onRowDragStart($event)" (rowDragEnd )="onRowDragEnd($event)" [rowSelection ]="selectionMode"
(rowSelectionChanging )="handleRowSelectionChange($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="system" header ="Is System Drive" > </igx-column >
<igx-row-island [height ]="null" [rowDraggable ]="true" [primaryKey ]="'id'" igxDrop [key ]="'folders'" #layout1 [rowSelection ]="selectionMode"
(rowSelectionChanging )="handleRowSelectionChange($event)" (rowDragStart )="onRowDragStart($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="createdOn" header ="Created On" > </igx-column >
<igx-column field ="createdBy" header ="Created By" > </igx-column >
<ng-template let-data igxRowDragGhost >
<div class ="allow-drop" >
<igx-icon family ="material" > {{dragIcon}}{{countIcon}}</igx-icon >
</div >
</ng-template >
<igx-row-island [height ]="null" [rowDraggable ]="true" [primaryKey ]="'id'" igxDrop [key ]="'files'" [rowSelection ]="selectionMode"
(rowSelectionChanging )="handleRowSelectionChange($event)" (rowDragStart )="onRowDragStart($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="extension" header ="Extension" > </igx-column >
<igx-column field ="size" header ="Size" dataType ="number" [hasSummary ]="true" > </igx-column >
<igx-column field ="createdBy" header ="createdBy" > </igx-column >
<ng-template let-data igxRowDragGhost >
<div class ="allow-drop" >
<igx-icon family ="material" > {{dragIcon}}{{countIcon}}</igx-icon >
</div >
</ng-template >
</igx-row-island >
</igx-row-island >
<ng-template let-data igxRowDragGhost >
<div class ="allow-drop" >
<igx-icon family ="material" > {{dragIcon}}{{countIcon}}</igx-icon >
</div >
</ng-template >
</igx-hierarchical-grid >
html コピー .drop-area {
width : 160px ;
height : 160px ;
background-color : #d3d3d3 ;
border : 1px dashed #131313 ;
display : flex;
justify-content : center;
align-items : center;
flex-flow : column;
text-align : center;
margin : 8px ;
}
:host {
display : flex;
justify-content : space-evenly;
align-items : center;
flex-flow : row;
width : 100% ;
padding-top : 10px ;
}
.allow-drop {
z-index : 1 ;
}
.igx-grid {
margin : 0 1rem ;
}
scss コピー
드래그 아이콘 템플릿 만들기
드래그 핸들 아이콘은 그리드의 dragIndicatorIconTemplate
사용하여 템플릿화할 수 있습니다. 우리가 만들고 있는 예제에서 아이콘을 기본 아이콘(drag_indicator
)에서 drag_handle
로 변경해 보겠습니다. 이를 위해 igxDragIndicatorIcon
사용하여 igx-hierarchical-grid
본문 내부에 템플릿을 전달할 수 있습니다.
<igx-hierarchical-grid >
...
<ng-template igxDragIndicatorIcon >
<igx-icon > drag_handle</igx-icon >
</ng-template >
...
</igx-hierarchical-grid >
html
새 아이콘 템플릿을 설정한 후에는 DragIcon enum
의 DEFAULT
아이콘도 조정해야 합니다. 그러면 changeIcon
메서드에 의해 적절하게 변경됩니다.
enum DragIcon {
DEFAULT = "drag_handle" ,
...
}
typescript
놓기 영역 스타일 지정
드롭 핸들러가 올바르게 구성되면 남은 것은 드롭 영역의 스타일을 약간 지정하는 것입니다.
.drop-area {
width : 160px ;
height : 160px ;
background-color : #d3d3d3 ;
border : 1px dashed #131313 ;
display : flex;
justify-content : center;
align-items : center;
flex-flow : column;
text-align : center;
margin : 8px ;
}
:host {
display : flex;
justify-content : center;
align-items : center;
flex-flow : column;
width : 100% ;
}
css
결과는 아래 데모에서 확인할 수 있습니다.
예제 데모
import { Component, ViewChild } from '@angular/core' ;
import { IDropDroppedEventArgs, IgxHierarchicalGridComponent, RowType, IgxDropDirective, IgxIconComponent, IgxColumnComponent, IgxRowIslandComponent, IgxDragIndicatorIconDirective } from 'igniteui-angular' ;
import { createData, IDrive } from '../../data/files.data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
enum DragIcon {
DEFAULT = 'drag_handle' ,
ALLOW = 'remove'
}
@Component ({
selector : 'app-hierarchical-grid-row-drag' ,
styleUrls : ['./hierarchical-grid-row-drag.component.scss' ],
templateUrl : 'hierarchical-grid-row-drag.component.html' ,
imports : [IgxDropDirective, IgxIconComponent, IgxHierarchicalGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent, IgxDragIndicatorIconDirective]
})
export class HGridDragSampleComponent {
@ViewChild (IgxHierarchicalGridComponent, { read : IgxHierarchicalGridComponent, static : true })
public hGrid: IgxHierarchicalGridComponent;
public localData: IDrive[] = [];
constructor ( ) {
this .localData = createData(3 , 12 , 8 );
}
public onRowDragEnd (args ) {
args.animation = true ;
}
public onDropAllowed (args: IDropDroppedEventArgs ) {
const draggedRow: RowType = args.dragData;
draggedRow.delete();
}
public onEnterAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW);
}
public onLeaveAllowed (args ) {
this .changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT);
}
private changeGhostIcon (ghost, icon: string ) {
if (ghost) {
const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon' );
if (currentIcon) {
currentIcon.innerText = icon;
}
}
}
}
ts コピー <div class ="drop-area" igxDrop (enter )="onEnterAllowed($event)" (leave )="onLeaveAllowed($event)"
(dropped )="onDropAllowed($event)" >
<igx-icon > delete</igx-icon >
<div > Drag a row here to delete it</div >
</div >
<igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" [allowFiltering ]='true' #grid1 [data ]="localData"
[primaryKey ]="'id'" [rowDraggable ]="true" [height ]="'540px'" [width ]="'100%'" #hGrid
(rowDragEnd )="onRowDragEnd($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="system" header ="Is System Drive" > </igx-column >
<igx-row-island [height ]="null" [primaryKey ]="'id'" igxDrop [key ]="'folders'" #layout1 (rowDragEnd )="onRowDragEnd($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="createdOn" header ="Created On" > </igx-column >
<igx-column field ="createdBy" header ="Created By" > </igx-column >
<igx-row-island [height ]="null" [rowDraggable ]="true" [primaryKey ]="'id'" igxDrop [key ]="'files'" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="extension" header ="Extension" > </igx-column >
<igx-column field ="size" header ="Size" dataType ="number" [hasSummary ]="true" > </igx-column >
<igx-column field ="createdBy" header ="createdBy" > </igx-column >
</igx-row-island >
</igx-row-island >
<ng-template igxDragIndicatorIcon >
<igx-icon > drag_handle</igx-icon >
</ng-template >
</igx-hierarchical-grid >
html コピー .drop-area {
width : 160px ;
height : 160px ;
background-color : #d3d3d3 ;
border : 1px dashed #131313 ;
display : flex;
justify-content : center;
align-items : center;
flex-flow : column;
text-align : center;
margin : 8px ;
}
:host {
display : flex;
justify-content : space-evenly;
align-items : center;
flex-flow : row;
width : 100% ;
padding-top : 10px ;
}
.igx-grid {
margin : 0 1rem ;
}
scss コピー
애플리케이션 데모
행 재정렬 데모
그리드의 행 드래그 이벤트와 igxDrop
지시문을 사용하면 행을 드래그하여 재정렬할 수 있는 그리드를 생성할 수 있습니다.
모든 작업은 그리드 본체 내부에서 발생하므로 여기에 igxDrop
지시문을 첨부해야 합니다.
<igx-hierarchical-grid #grid [data ]="localData" [primaryKey ]="'id'"
[rowDraggable ]="true" (rowDragStart )="rowDragStart($event)" igxDrop (dropped )="rowDrop($event)" >
...
</igx-hierarchical-grid >
html
그리드에 대해 primaryKey
지정되어 있는지 확인하세요! 논리에는 행을 올바르게 다시 정렬할 수 있도록 행에 대한 고유 식별자가 필요합니다.
rowDraggable
활성화되고 드롭 영역이 정의되면 드롭 이벤트에 대한 간단한 핸들러를 구현해야 합니다. 행을 드래그할 때 다음을 확인하세요.
행이 확장되었나요? 그렇다면 접으세요.
행이 그리드 내부에 삭제되었습니까?
그렇다면 드래그된 행이 다른 어느 행에 삭제되었습니까?
대상 행을 찾았으면 data
배열에서 레코드 위치를 바꿉니다.
행이 처음에 선택되었습니까? 그렇다면 선택됨으로 표시하세요.
아래에서는 구성 요소의.ts
파일에 구현된 내용을 볼 수 있습니다.
export class HGridRowReorderComponent {
public rowDragStart(args: any ): void {
const targetRow = args.dragData;
if (targetRow.expanded) {
targetRow.expanded = false ;
}
}
public rowDrop(args: IDropDroppedEventArgs): void {
const targetRow = args.dragData;
const event = args.originalEvent;
const cursorPosition: Point = { x : event.clientX, y : event.clientY };
this .moveRow(targetRow, cursorPosition);
}
private moveRow(draggedRow: RowType, cursorPosition : Point): void {
const parent = this .hGrid;
const rowIndex: number = this .getTargetRowIndex(parent.rowList.toArray(), cursorPosition);
if (rowIndex === -1 ) { return ; }
const wasSelected = draggedRow.selected;
draggedRow.delete();
parent.data.splice(rowIndex, 0 , draggedRow.data);
if (wasSelected) {
parent.selectRows([parent.rowList.toArray()
.find((r ) => r.rowID === draggedRow.key).rowID], false );
}
}
private getTargetRowIndex(rowListArr: RowType[], cursorPosition : Point): number {
const targetElem: IgxHierarchicalRowComponent = this .catchCursorPosOnElem(rowListArr, cursorPosition);
return rowListArr.indexOf(rowListArr.find((r ) => r.rowData.id === targetElem.rowData.id));
}
private catchCursorPosOnElem(rowListArr: any [], cursorPosition : Point)
: IgxHierarchicalRowComponent {
for (const row of rowListArr) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window .scrollY && cursorPosition.y < rowRect.bottom + window .scrollY &&
cursorPosition.x > rowRect.left + window .scrollX && cursorPosition.x < rowRect.right + window .scrollX) {
return row;
} else if (row === rowListArr[rowListArr.length - 1 ] && cursorPosition.y > rowRect.bottom) {
return row;
}
}
}
}
typescript
이러한 몇 가지 간단한 단계를 통해 드래그/드롭을 통해 행을 재정렬할 수 있는 그리드를 구성했습니다! 다음 데모에서 위 코드가 실제로 작동하는 모습을 볼 수 있습니다.
또한 행 선택이 활성화되어 있으며 드래그된 행을 삭제할 때 선택이 유지됩니다.
import { Component, ViewChild } from '@angular/core' ;
import { IDropDroppedEventArgs, IgxHierarchicalGridComponent, RowType, Point, GridSelectionMode, IgxDropDirective, IgxColumnComponent, IgxRowIslandComponent } from 'igniteui-angular' ;
import { createData, IDrive } from '../../data/files.data' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
@Component ({
selector : 'app-hierarchical-grid-row-reorder' ,
styleUrls : ['./hierarchical-grid-row-reorder.component.scss' ],
templateUrl : 'hierarchical-grid-row-reorder.component.html' ,
imports : [IgxHierarchicalGridComponent, IgxDropDirective, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxRowIslandComponent]
})
export class HGridRowReorderComponent {
@ViewChild (IgxHierarchicalGridComponent, { read : IgxHierarchicalGridComponent, static : true })
public hGrid: IgxHierarchicalGridComponent;
public localData: IDrive[] = [];
public selectionMode: GridSelectionMode = 'multiple' ;
constructor ( ) {
this .localData = createData(3 , 12 , 8 );
}
public rowDragStart(args: any ): void {
const targetRow: RowType = args.dragData;
if (targetRow.expanded) {
targetRow.expanded = false ;
}
}
public rowDrop(args: IDropDroppedEventArgs): void {
const targetRow = args.dragData;
const event = args.originalEvent;
const cursorPosition: Point = { x : event.clientX, y : event.clientY };
this .moveRow(targetRow, cursorPosition);
}
private moveRow(draggedRow: RowType, cursorPosition : Point): void {
const parent = this .hGrid;
const rowIndex: number = this .getTargetRowIndex(parent.rowList.toArray(), cursorPosition);
if (rowIndex === -1 ) { return ; }
const wasSelected = draggedRow.selected;
draggedRow.delete();
parent.data.splice(rowIndex, 0 , draggedRow.data);
if (wasSelected) {
parent.selectRows([parent.rowList.toArray()
.find((r ) => r.key === draggedRow.key).key], false );
}
}
private getTargetRowIndex(rowListArr: any [], cursorPosition : Point): number {
const targetElem = this .catchCursorPosOnElem(rowListArr, cursorPosition);
return rowListArr.indexOf(rowListArr.find((r ) => r.key === targetElem.key));
}
private catchCursorPosOnElem(rowListArr: any [], cursorPosition : Point): any {
for (const row of rowListArr) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window .scrollY && cursorPosition.y < rowRect.bottom + window .scrollY &&
cursorPosition.x > rowRect.left + window .scrollX && cursorPosition.x < rowRect.right + window .scrollX) {
return row;
} else if (row === rowListArr[rowListArr.length - 1 ] && cursorPosition.y > rowRect.bottom) {
return row;
}
}
}
}
ts コピー <igx-hierarchical-grid [igxPreventDocumentScroll ]="true" class ="hgrid" igxDrop #grid1 [data ]="localData" [primaryKey ]="'id'"
[rowDraggable ]="true" [rowSelection ]="selectionMode" (rowDragStart )="rowDragStart($event)" (dropped )="rowDrop($event)"
[height ]="'540px'" [width ]="'100%'" #hGrid >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="system" header ="Is System Drive" > </igx-column >
<igx-row-island [height ]="null" [primaryKey ]="'id'" [key ]="'folders'" #layout1 >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="createdOn" header ="Created On" > </igx-column >
<igx-column field ="createdBy" header ="Created By" > </igx-column >
<igx-row-island [height ]="null" [primaryKey ]="'id'" igxDrop [key ]="'files'" [rowDraggable ]="true" [rowSelection ]="selectionMode"
(rowDragStart )="rowDragStart($event)" >
<igx-column field ="name" header ="Name" > </igx-column >
<igx-column field ="extension" header ="Extension" > </igx-column >
<igx-column field ="size" header ="Size" dataType ="number" [hasSummary ]="true" > </igx-column >
<igx-column field ="createdBy" header ="createdBy" > </igx-column >
</igx-row-island >
</igx-row-island >
</igx-hierarchical-grid >
html コピー :host {
display : flex;
flex-flow : row;
align-items : center;
justify-content : center;
padding : 8px 0px ;
}
.igx-grid {
margin : 0 1rem ;
}
scss コピー
제한 사항
현재 rowDraggable
지시어에 대해 알려진 제한 사항은 없습니다.
API 참조
추가 리소스
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.