Angular Tree Grid 一括編集とトランザクション
IgxTreeGrid の一括編集機能は、HierarchicalTransactionService
に基づいています。トランザクション サービス クラス階層
トピックに従って、igxHierarchicalTransactionService
の概要と、その実装方法の詳細を確認してください。
以下は、Tree Grid コンポーネントに対して一括編集を有効にする方法の詳細な例です。
Angular Tree Grid 一括編集とトランザクションの例
以下のサンプルは、treeGrid にプロバイダーのトランザクションがあり、batchEditing
と行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。
Note
トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。
使用方法
IgxTreeGridModule
を app.module.ts ファイルにインポートします。
// app.module.ts
...
import { IgxTreeGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxTreeGridModule],
...
})
export class AppModule {}
次に、Tree Grid から batchEditing
を有効にします。
<igx-tree-grid [data]="data" [batchEditing]="true">
...
</igx-tree-grid>
これにより、igx-tree-grid に Transaction
サービスの適切なインスタンスが提供されます。適切な TransactionService
は TransactionFactory
を通じて提供されます。この内部実装の詳細については、トランザクション トピックを参照してください。
一括編集を有効にした後、バインドされたデータ ソースと rowEditable
を true に設定して IgxTreeGrid
を定義し、バインドします。
<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 (undo、redo、commit) の使用方法を示します。
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
は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit
を呼び出すことです。
Tree Grid
内の親ノードの削除にはいくつかの特徴があります。階層データを使用している場合、親を削除すると子も削除されます。フラットデータを使用している場合、Tree Grid
の cascadeOnDelete
プロパティを使用して必要な動作を設定できます。このプロパティは、親が削除されたときに子レコードを削除するかどうかを示します (デフォルトでは true に設定されています)。
Note
rowEditable
プロパティを無効にすると Tree Grid
を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。