行删除后如何升级/刷新ag-grid？

Question

我有一个ag网格，我试图删除一行......我可以使用＆＃34; splice＆＃34;删除数据源中的行。技术，之后我想刷新表。但它显示错误。这是我用来删除行的代码

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();
        }
    }
}

显示出类似这样的错误 - ＆gt;无法阅读属性＆＃39; refreshView＆＃39; of undefined ...如何在行删除后观察表中所做的更改。

Answer 1

您应该再次将行设置为网格： 在你的拼接之后：

gridOptions.api.setRowData(gridOptions.rowData)

也许这个plunkr帮助https://plnkr.co/0k4sYa

ag-grid的作者在ag-grid论坛中解释了这一点

Answer 2

为了获得更好的性能，请使用grid 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/

Answer 3

文档中描述了一种更有效的方法：ag-Grid Updating Data。

删除行后必须使用方法api.updateRowData：

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

例如，只删除了一行：

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

使用此方法，网格将只更新参数中的行并保留所有其他视图状态（order，...）。

Answer 4

要更新聚集特定单元格中的数据

        let rowNode = f.gridApi.getRowNode(f.id);  // use to find the rowNode
        rowNode.setDataValue('myPrice','1000') // update the datavalue in the price cell

f是集聚的当前节点

Answer 5

更新的答案，适用于较新版本的agGrid。

从版本23.1.0+：使用applyTransaction(transaction)

gridApi.applyTransaction({ remove: rowArray });

// similarly you can add or update using transaction
gridApi.applyTransaction({ update: rowArray});
gridApi.applyTransaction({ add: rowArray});

rowArray是行数据的数组。可以从RowNode.data访问现有行数据。

示例

onRemoveFirst() {
  const firstRow = this.gridApi.getRenderedNodes()[0].data;

  if (!firstRow) return;
  this.gridApi.applyTransaction({ remove: [firstRow] });
}

onRemoveSelected() {
  const selectedData = this.gridApi.getSelectedRows();
  this.gridApi.applyTransaction({ remove: selectedData });
}

onThanos() {
  const itemsToRemove = [];

  this.gridApi.forEachNodeAfterFilterAndSort((rowNode) => {
    const shouldThanos = randomBetween(1, 100) <= 50;

    if (shouldThanos) {
      itemsToRemove.push(rowNode.data);
    }
  });
  this.gridApi.applyTransaction({ remove: itemsToRemove });
}

实时演示

Answer 6

$events.refreshInfiniteCache();

您可以仅使用它来更新网格