Angular Tree Grid 일괄 편집 및 거래

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

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

    Angular Tree Grid 일괄 편집 및 거래 예

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

    EXAMPLE
    TS
    HTML
    SCSS

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

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

    용법

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

    // app.module.ts
    
    ...
    import { IgxTreeGridModule } from 'igniteui-angular';
    
    @NgModule({
        ...
        imports: [..., IgxTreeGridModule],
        ...
    })
    export class AppModule {}
    typescript

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

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

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

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

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

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

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

    API 참조

    추가 리소스

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