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

    IgxTreeGrid の一括編集機能は、HierarchicalTransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxHierarchicalTransactionService の概要と、その実装方法の詳細を確認してください。

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

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

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

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

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

    使用方法

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

    // app.module.ts

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

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

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

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

    これにより、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>
...
html

    以下のコード例は、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();
    }
}
typescript

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

    Tree Grid 内の親ノードの削除にはいくつかの特徴があります。階層データを使用している場合、親を削除すると子も削除されます。フラットデータを使用している場合、Tree Grid の cascadeOnDelete プロパティを使用して必要な動作を設定できます。このプロパティは、親が削除されたときに子レコードを削除するかどうかを示します (デフォルトでは true に設定されています)。

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

    API リファレンス

    その他のリソース

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