web-dev-qa-db-ja.com

行の削除後にag-gridをアップグレード/更新する方法は？

行を削除しようとしているagグリッドがあります...「スプライス」技術を使用してデータソースから行を削除できます。その後、テーブルを更新します。しかし、エラーが表示されています。これは行を削除するために使用しているコード

selectedvalue={} //this holds the selected row value
rowData=[]; //this holds all the row data
onRowSelected(event) {
  this.selectedvalue = event;
 }
deletebtn() {
    for (let i = 0; i < this.rowData.length; i++) {
        if (this.selectedvalue.node.data.make === this.rowData[i].make) {
            this.rowData.splice(i, 1);
            this.gridOptions.api.refreshView();
        }
    }
}

これは次のようなエラーを示しています->未定義のプロパティ「refreshView」を読み取ることができません...行の削除後にテーブルで行われた変更を監視する方法。

angularag-grid
12
Raja Reddy

グリッドに行を再度設定する必要があります：スプライス後：

gridOptions.api.setRowData(gridOptions.rowData)

たぶん、このplunkrは役立ちます https://plnkr.co/0k4sYa

Ag-gridの著者は、ag-gridフォーラムでこれを説明しています

26
Moises Sacal

パフォーマンスを向上させるには、グリッドAPI呼び出しを使用して行を追加/削除します。
先頭に行を挿入するには、選択した行のコピーです：

var rowData = JSON.parse(JSON.stringify(selectedNode.data));
gridOptions.api.insertItemsAtIndex(0, [rowData]);

選択した行を削除するには：

var selectedNodes = gridOptions.api.getSelectedNodes();
gridOptions.api.removeItems(selectedNodes);

元の行のディープコピーの後にのみ新しい行を挿入してください。
それ以外の場合、apiは同じ行を引き続き参照します。
したがって、その後の新しい行の削除は、グリッドから元の行を削除します。

APIの詳細については、ドキュメントを参照してください。
https://www.ag-grid.com/javascript-grid-insert-remove/

5
user3294566

ドキュメントで説明されているより効率的な方法があります： ag-Grid Updating Data 。

行が削除された後、メソッドapi.updateRowDataを使用する必要があります。

this.gridOptions.api.updateRowData({ remove: [array of rows you have deleted]});

たとえば、1行だけ削除した場合：

this.gridOptions.api.updateRowData({ remove: [this.rowData[i]]})

この方法では、グリッドはパラメーターの行を更新するだけで、他のすべてのビューステート（順序など）を保持します。

4
A.Baudouin

$events.refreshInfiniteCache();

グリッドを更新するためだけにこれを使用できます

1
Ahmad Shakeel