Angular 계층적 그리드 일괄 편집 및 트랜잭션
IgxHierarchicalGrid의 일괄 편집 기능은 다음을 기반으로 합니다. TransactionService
. 따라가다 Transaction Service class hierarchy
주제에 대한 개요를 볼 수 있습니다. igxTransactionService
구현 방법을 자세히 설명합니다.
IgxHierarchicalGrid
와 함께 HierarchicalTransactionService
사용하되 각 아일랜드별로 별도의 트랜잭션 로그를 축적하게 하려면 서비스 팩토리를 대신 제공해야 합니다. 하나는 내보내지고 IgxHierarchicalTransactionServiceFactory
로 사용할 준비가 되었습니다.
다음은 계층형 그리드 구성 요소에 대해 일괄 편집을 활성화하는 방법에 대한 자세한 예입니다.
Angular Hierarchical Grid Batch Editing and Transactions Example
다음 샘플은 hierarchicalGrid에 batchEditing
활성화되고 행 편집이 활성화된 시나리오를 보여줍니다. 후자는 전체 행 편집이 확인된 후 트랜잭션이 추가되도록 보장합니다.
Note
트랜잭션 상태는 업데이트, 추가, 삭제된 모든 행과 마지막 상태로 구성됩니다.
Usage
시작하려면 IgxHierarchicalGridModule
에서 app.module.ts 파일:
// app.module.ts
...
import { IgxHierarchicalGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxHierarchicalGridModule],
...
})
export class AppModule {}
그런 다음 계층 그리드에서 batchEditing
활성화하기만 하면 됩니다.
<igx-hierarchical-grid [data]="data" [batchEditing]="true">
...
</igx-hierarchical-grid>
이렇게 하면 igx-hierarchical-grid에 대해 적절한 Transaction
서비스 인스턴스가 제공됩니다. 적절한 TransactionService
TransactionFactory
통해 제공됩니다. 거래 주제에서 이 내부 구현에 대해 자세히 알아볼 수 있습니다.
일괄 편집이 활성화된 후 IgxHierarchicalGrid
바인딩된 데이터 소스와 rowEditable
true로 설정하고 바인딩합니다.
<igx-hierarchical-grid #hierarchicalGrid [batchEditing]="true" [data]="data" [primaryKey]="'Artist'"
[height]="'580px'" [width]="'100%'" [rowEditable]="true" >
...
<igx-row-island #childGrid [key]="'Albums'" [primaryKey]="'Album'" [rowEditable]="true">
<igx-grid-toolbar></igx-grid-toolbar>
...
<ng-template igxToolbarCustomContent let-grid="grid">
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo(grid)">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo(grid)">Redo</button>
</ng-template>
</igx-row-island>
</igx-hierarchical-grid>
...
<div class="buttons-row">
<div class="buttons-wrapper">
<button igxButton [disabled]="!undoEnabledParent" (click)="undo(hierarchicalGrid)">Undo Parent</button>
<button igxButton [disabled]="!redoEnabledParent" (click)="redo(hierarchicalGrid)">Redo Parent</button>
</div>
</div>
...
다음 코드는 transactions
API(실행 취소, 다시 실행, 커밋)의 사용법을 보여줍니다.
...
export class HierarchicalGridBatchEditingSampleComponent {
public undo(grid: any) {
/* exit edit mode and commit changes */
grid.endEdit(true);
grid.transactions.undo();
}
public redo(grid: any) {
/* exit edit mode and commit changes */
grid.endEdit(true);
grid.transactions.redo();
}
public commit() {
this.hierarchicalGrid.transactions.commit(this.data);
this.childGrid.hgridAPI.getChildGrids().forEach((grid) => {
grid.transactions.commit(grid.data);
});
this.dialogChanges.close();
}
}
Note
트랜잭션 API는 편집 종료를 처리하지 않으며 사용자가 직접 처리해야 합니다. 그렇지 않으면 Hierarchical Grid
편집 모드로 유지됩니다. 이를 수행하는 한 가지 방법은 해당 메소드에서 endEdit
호출하는 것입니다.
Note
rowEditable
속성을 비활성화하면 Hierarchical Grid
수정되어 셀 변경 시 트랜잭션이 생성되고 UI에 행 편집 오버레이가 표시되지 않습니다.