Premium

Angular Grid 一括編集とトランザクション

HierarchicalTransactionService を IgxGrid と一緒に使用し、アイランドごとに個別のトランザクションログを蓄積するには、代わりにサービスファクトリを提供する必要があります。HierarchicalTransactionService として使用できるようになります。

以下は、Grid コンポーネントに対して一括編集を有効にする方法の詳細な例です。

Below is a detailed example of how is Batch Editing enabled for the Grid component.

Angular Grid 一括編集とトランザクションの例

以下のサンプルは、grid にプロバイダーのトランザクションがあり、batchEditing と行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。

トランザクションステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。

Transaction state consists of all the updated, added and deleted rows, and their last states.

使用方法

IgxGridModule を app.module.ts ファイルにインポートします。

// app.module.ts

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

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

次に、Grid から batchEditing を有効にします。

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

これにより、igx-grid に Transaction サービスの適切なインスタンスが提供されます。適切な TransactionService は TransactionFactory を通じて提供されます。この内部実装の詳細については、トランザクショントピックを参照してください。

一括編集を有効にした後、バインドされたデータソースと rowEditable を true に設定して IgxGrid を定義し、バインドします。

<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
    [rowEditable]="true">
    ...
</igx-grid>
...
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
    (click)="openCommitDialog(dialogGrid)">Commit</button>
...

トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、Grid は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit を呼び出すことです。

<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>
...

rowEditable プロパティを無効にすると Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。

The following code demonstrates the usage of the IgxGridComponent.transactions API - undo, redo, commit.

export class GridBatchEditingSampleComponent {
    @ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;

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

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

    public commit() {
        this.grid.transactions.commit(this.data);
        this.toggle.close();
    }
}

The transactions API won’t handle end of edit and you’d need to do it by yourself. Otherwise, Grid would stay in edit mode. One way to do that is by calling endEdit in the respective method.

Disabling rowEditable property will modify Grid to create transactions on cell change and will not expose row editing overlay in the UI.

一括編集のリモートページングデモ

完全なデモ構成をご覧ください。

API リファレンス

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。