Angular Data Grid의 행 동작
Ignite UI for Angular의 그리드 구성 요소는 ActionStrip을 사용하고 행/셀 구성 요소와 행 고정을 위해 CRUD를 활용할 수 있는 기능을 제공합니다. Action Strip 구성 요소는 이러한 작업에 대해 미리 정의된 UI 컨트롤을 호스팅할 수 있습니다.
용법
첫 번째 단계는 app.module.ts 파일에서 IgxActionStripModule을 가져오는 것입니다.
...
import { IgxActionStripModule } from 'igniteui-angular' ;
@NgModule ({
...
imports : [..., IgxActionStripModule],
...
})
typescript
사전 정의된 actions
UI 구성 요소는 다음과 같습니다.
이는 <igx-action-strip>
내부에 추가되며 기본 상호 작용을 제공하는 액션 스트립을 갖는 데 모두 필요합니다.
<igx-grid [data ]="data" [rowEditable ]="true" [primaryKey ]="'ID'" >
<igx-column *ngFor ="let c of columns" [field ]="c.field" >
</igx-column >
<igx-action-strip #actionStrip >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
<igx-grid-editing-actions > </igx-grid-editing-actions >
</igx-action-strip >
</igx-grid >
html
IgxActionStripComponent
그리드의 하위 구성요소인 경우 행에 마우스를 올리면 자동으로 UI가 표시됩니다.
맞춤 구현
이러한 구성 요소는 템플릿을 노출하여 사용자 정의에 유연성을 제공합니다. 예를 들어, 다음을 사용하고 싶다면 ActionStrip
다음과 같은 행 작업이 포함된 Gmail 시나리오의 경우 delete
, edit
등을 사용하여 간단히 버튼 구성 요소를 만들 수 있습니다. igx-icon
, 클릭 이벤트를 추가하고 igx-action-strip
요소.
<igx-grid >
<igx-action-strip #actionstrip >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
<button title ="Edit" igxIconButton ="flat" igxRipple (click )='startEdit(actionstrip.context)' >
<igx-icon > edit</igx-icon >
</button >
<button title ="Delete" igxIconButton ="flat" igxRipple *ngIf ='!isDeleted(actionstrip.context)' (click )='actionstrip.context.delete()' >
<igx-icon > delete</igx-icon >
</button >
</igx-action-strip >
</igx-grid >
html
import { Component, ViewChild } from '@angular/core' ;
import { IgxGridComponent, RowType, Transaction, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular' ;
import { DATA } from '../../data/nwindData' ;
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive' ;
import { NgIf } from '@angular/common' ;
@Component ({
selector : 'app-grid-row-action-strip' ,
styleUrls : [`grid-action-strip-sample.scss` ],
templateUrl : 'grid-action-strip-sample.html' ,
imports : [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgIf, IgxIconButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class GridActionStripSampleComponent {
@ViewChild ('grid' , { read : IgxGridComponent, static : true }) public grid: IgxGridComponent;
public data: any [];
public discardedTransactionsPerRecord: Map <number , Transaction[]> = new Map <number , Transaction[]>();
constructor ( ) {
this .data = DATA;
}
public isDirty (rowContext: RowType ) {
const isRowEdited = this .grid.transactions.getAggregatedChanges(true ).find(x => x.id === rowContext?.key);
return rowContext && (rowContext.deleted || isRowEdited);
}
public isDeleted (rowContext: RowType ) {
return rowContext && rowContext.deleted;
}
public inEditMode (rowContext: RowType ) {
return rowContext && rowContext.inEditMode;
}
public startEdit(rowContext: RowType): void {
const firstEditable = rowContext.cells.filter(cell => cell.editable)[0 ];
const grid = rowContext.grid;
if (grid.rowList.filter(r => r === rowContext).length !== 0 ) {
grid.gridAPI.crudService.enterEditMode(firstEditable);
firstEditable.activate(null );
}
}
public commit (rowContext: RowType ) {
this .grid.transactions.commit(this .grid.data, rowContext.key);
this .discardedTransactionsPerRecord.set(rowContext.key, []);
}
public redo (rowContext: RowType ) {
const rowID = rowContext.key;
const lastDiscarded = this .discardedTransactionsPerRecord.get(rowID);
lastDiscarded.forEach((transaction ) => {
const recRef = this .grid.gridAPI.get_rec_by_id(transaction.id);
this .grid.transactions.add(transaction, recRef);
});
this .discardedTransactionsPerRecord.set(rowID, []);
}
public hasDiscardedTransactions (rowContext: RowType ) {
if (!rowContext) { return false ; }
const lastDiscarded = this .discardedTransactionsPerRecord.get(rowContext.key);
return lastDiscarded && lastDiscarded.length > 0 ;
}
public undo (rowContext: RowType ) {
const transactionsToDiscard = this .grid.transactions.getAggregatedChanges(true )
.filter(x => x.id === rowContext.key);
this .discardedTransactionsPerRecord.set(rowContext.key, transactionsToDiscard);
this .grid.transactions.clear(rowContext.key);
}
}
ts コピー <div class ="grid__wrapper" >
<igx-grid [igxPreventDocumentScroll ]="true" #grid [data ]="data" [primaryKey ]="'ProductID'" width ="100%"
height ="500px" [rowEditable ]="true" [batchEditing ]="true" [allowFiltering ]="true" >
<igx-column field ="ProductID" header ="Product ID" [pinned ]="true" [hidden ]="true" [filterable ]="false" >
</igx-column >
<igx-column field ="ProductName" header ="Product Name" dataType ="string" [sortable ]="true" > </igx-column >
<igx-column field ="UnitPrice" header ="Unit Price" dataType ="currency" [sortable ]="true" > </igx-column >
<igx-column field ="UnitsOnOrder" header ="Units On Order" dataType ="number" [editable ]="false"
[filterable ]="false" > </igx-column >
<igx-column field ="UnitsInStock" header ="Units In Stock" dataType ="number" [sortable ]="true" > </igx-column >
<igx-column field ="QuantityPerUnit" header ="Quantity Per Unit" dataType ="string" [filterable ]="false" >
</igx-column >
<igx-column field ="ReorderLevel" header ="Reorder Level" dataType ="number" [filterable ]="false" > </igx-column >
<igx-column field ="Discontinued" header ="Discontinued" dataType ="boolean" [filterable ]="false" >
</igx-column >
<igx-action-strip #actionstrip >
<igx-grid-pinning-actions > </igx-grid-pinning-actions >
<ng-container *ngIf ="!inEditMode(actionstrip.context)" >
<button title ="Edit" igxIconButton ="flat" igxRipple
(click )='startEdit(actionstrip.context)' >
<igx-icon > edit</igx-icon >
</button >
<button title ="Undo All" igxIconButton ="flat" igxRipple *ngIf ='isDirty(actionstrip.context)'
(click )='undo(actionstrip.context)' >
<igx-icon > undo</igx-icon >
</button >
<button title ="Redo All" igxIconButton ="flat" igxRipple
*ngIf ='!isDirty(actionstrip.context) && hasDiscardedTransactions(actionstrip.context)'
(click )='redo(actionstrip.context)' >
<igx-icon > redo</igx-icon >
</button >
<button title ='Save' igxIconButton ="flat" igxRipple *ngIf ='isDirty(actionstrip.context)'
(click )='commit(actionstrip.context)' >
<igx-icon > save</igx-icon >
</button >
<button title ="Delete" igxIconButton ="flat" igxRipple *ngIf ='!isDeleted(actionstrip.context)'
(click )='actionstrip.context.delete()' >
<igx-icon > delete</igx-icon >
</button >
</ng-container >
</igx-action-strip >
</igx-grid >
</div >
html コピー .grid__wrapper {
margin : 15px ;
}
scss コピー
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
API 참조
Action Strip API에 대한 자세한 내용은 다음 링크를 참조하세요.
액션 스트립 내에서 사용할 수 있는 추가 구성요소 및/또는 지시어: