Angular 그리드 일괄 편집 및 트랜잭션

    IgxGrid의 일괄 편집 기능은 TransactionService. 따라가다 Transaction Service class hierarchy 주제에 대한 개요를 볼 수 있습니다. igxTransactionService 구현 방법을 자세히 설명합니다.

    다음은 그리드 구성 요소에 대해 일괄 편집을 활성화하는 방법에 대한 자세한 예입니다.

    Angular Grid Batch Editing and Transactions Example

    다음 샘플은 그리드에 batchEditing 활성화되어 있고 행 편집이 활성화되어 있는 시나리오를 보여줍니다. 후자는 전체 행 편집이 확인된 후 트랜잭션이 추가되도록 보장합니다.

    Note

    트랜잭션 상태는 업데이트, 추가, 삭제된 모든 행과 마지막 상태로 구성됩니다.

    Usage

    시작하려면 IgxGridModule에서 app.module.ts 파일:

    // app.module.ts

...
import { IgxGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxGridModule],
    ...
})
export class AppModule {}

    그런 다음 그리드에서 batchEditing 활성화하기만 하면 됩니다.

    <igx-grid [data]="data" [batchEditing]="true">
  ...
</igx-grid>

    이렇게 하면 igx-grid에 대해 적절한 Transaction 서비스 인스턴스가 제공됩니다. 적절한 TransactionService​ ​TransactionFactory 통해 제공됩니다. 거래 주제에서 이 내부 구현에 대해 자세히 알아볼 수 있습니다.

    일괄 편집이 활성화된 후 IgxGrid 바인딩된 데이터 소스와 rowEditable true로 설정하고 바인딩합니다.

    <igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
    [rowEditable]="true">
    ...
</igx-grid>
...
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
    (click)="openCommitDialog(dialogGrid)">Commit</button>
...

    다음 코드는 transactions API(실행 취소, 다시 실행, 커밋)의 사용법을 보여줍니다.

    export class GridBatchEditingSampleComponent {
    @ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;

    public undo() {
        /* exit edit mode and commit changes */
        this.grid.endEdit(true);
        this.grid.transactions.undo();
    }

    public redo() {
        /* exit edit mode and commit changes */
        this.grid.endEdit(true);
        this.grid.transactions.redo()
    }

    public commit() {
        this.grid.transactions.commit(this.data);
        this.toggle.close();
    }
}
    Note

    트랜잭션 API는 편집 종료를 처리하지 않으며 사용자가 직접 처리해야 합니다. 그렇지 않으면 Grid 편집 모드로 유지됩니다. 이를 수행하는 한 가지 방법은 해당 메소드에서 endEdit 호출하는 것입니다.

    Note

    ​rowEditable 속성을 비활성화하면 Grid 수정되어 셀 변경 시 트랜잭션이 생성되고 UI에 행 편집 오버레이가 표시되지 않습니다.

    Remote Paging with Batch Editing Demo

    전체 데모 구성을 확인하세요

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.