Angular Tree Grid 일괄 편집 및 거래

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

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

    Angular Tree Grid Batch Editing and Transactions Example

    다음 예시는 treeGridbatchEditing가 활성화되어 있고 행 편집이 활성화된 상황을 보여줍니다. 후자는 전체 행 편집이 확인된 후 거래가 추가되도록 보장합니다.

    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는 a.를 통해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>
...

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

    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

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