Angular Tree Grid 일괄 편집 및 트랜잭션

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

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

    Angular Tree Grid Batch Editing and Transactions Example

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

    Note

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

    Usage

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

    // app.module.ts

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

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

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

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

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

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

    <igx-tree-grid #treeGrid [batchEditing]="true" [data]="data" primaryKey="employeeID" foreignKey="PID"
    width ="100%" height ="500px" rowEditable=true>
    ...
</igx-tree-grid>
...
    <button igxButton (click)="addRow()">Add Root Level Row</button>
    <button igxButton [disabled]="!treeGrid.transactions.canUndo" (click)="undo()">Undo</button>
    <button igxButton [disabled]="!treeGrid.transactions.canRedo" (click)="redo()">Redo</button>
    <button igxButton [disabled]="treeGrid.transactions.getAggregatedChanges(false).length < 1"
        (click)="openCommitDialog()">Commit</button>
...

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

    export class TreeGridBatchEditingSampleComponent {
    @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;

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

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

    public commit() {
        this.treeGrid.transactions.commit(this.data);
        this.dialog.close();
    }
}
    Note

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

    상위 노드 삭제 Tree Grid 몇 가지 특징이 있습니다. 계층적 데이터를 사용하는 경우 상위 항목을 삭제하면 하위 항목도 삭제됩니다. 플랫 데이터를 사용하는 경우 다음을 사용하여 원하는 동작을 설정할 수 있습니다. cascadeOnDelete의 자산 Tree Grid. 이 속성은 상위 레코드가 삭제될 때 하위 레코드도 삭제해야 하는지 여부를 나타냅니다(기본적으로 다음으로 설정됨). true).

    Note

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

    API References

    Additional Resources

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