Angular Grid 일괄 편집 및 거래

    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 {}

    그 다음에는 Grid에서 다음 기능을 활성화batchEditing 하기만 하면 됩니다:

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

    이렇게 하면 igx-그리드에 적절한 서비스 인스턴스Transaction가 제공될 수 있습니다. 고유TransactionService는 a.를 통해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>
...

    다음 코드는 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

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