Angular 계층형 그리드 일괄 편집 및 거래

    IgxHierarchicalGrid의 배치 편집 기능은 다음을 기반으로TransactionService 합니다. 주제를Transaction Service class hierarchy 따라가면 개요igxTransactionService와 구현 방법을 자세히 확인할 수 있습니다.

    각 섬별로 별도의 거래 로그를 누적하면HierarchicalTransactionService​IgxHierarchicalGrid 서도 서비스 공장을 제공해야 합니다. 하나는 내보내져 사용 준비가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-계층 그리드에 적절한 서비스 인스턴스Transaction가 제공될 수 있습니다. 고유TransactionService는 a.를 통해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>
...

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

    ...
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에서 행 편집 오버레이가 노출되지 않습니다.

    API References

    Additional Resources

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