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

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

    ​IgxHierarchicalGrid와 함께 HierarchicalTransactionService 사용하되 각 아일랜드별로 별도의 트랜잭션 로그를 축적하게 하려면 서비스 팩토리를 대신 제공해야 합니다. 하나는 내보내지고 IgxHierarchicalTransactionServiceFactory로 사용할 준비가 되었습니다.

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

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

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

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

    용법

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

    // app.module.ts

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

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

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

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

    이렇게 하면 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>
...

html

    다음 코드는 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();
    }
}
typescript

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

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

    API 참조

    추가 리소스

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