Angular Grid 일괄 편집 및 거래

    The Batch Editing feature of the IgxGrid is based on the TransactionService. Follow the Transaction Service class hierarchy topic to see an overview of the igxTransactionService and details how it is implemented.

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

    Angular Grid Batch Editing and Transactions Example

    The following sample demonstrates a scenario, where the grid has batchEditing enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.

    Note

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

    Usage

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

    // app.module.ts

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

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

    Then, all you need to do is enable batchEditing from your Grid:

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

    This will ensure a proper instance of Transaction service is provided for the igx-grid. The proper TransactionService is provided through a TransactionFactory. You can learn more about this internal implementation in the transactions topic.

    배치 편집이 활성화된 후, 바인딩된 데이터 소스를 정의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>
...

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

    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

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