ag-grid - 向网格中添加新行

Question

我像这样初始化 ag-grid：

<ag-grid-ng2 [rowData]="records"></ag-grid-ng2>

将新项目添加到记录数组后，ag-grid 中的行保持不更新。我必须调用 setRowData(records)。但这非常慢，并且 ag-grid 会失去其状态（如聚焦单元格）。

是否有另一种方法可以在更改rowData.

Answer 1

不，没有其他办法。网格期望 rowData 是不可变的，这意味着您必须替换数组才能获取 [rowData] 属性。正如您所做的那样，解决此问题的方法是调用 api.setRowData() 方法，该方法强制网格将 rowData 视为一组新数据。

Answer 2

最近我注意到一个新功能this.gridOptions.api.updateRowData(Tranactions)。您传递一个包含三个数组的对象：

var transactions = {
    add: [/*array of records you want to add.*/]
    remove: [/*array of records you want to remove.*/]
    update: [/*array of records you want to update.*/]
}

this.gridOptions.api.updateRowData(tranactions);

参考：https ://www.ag-grid.com/javascript-grid-data-update/?framework=javascript 。（出于某种原因，他们在该页面上调用了函数updateData但不存在这样的函数。而是调用它updateRowData。）

Answer 3

这就是我最终添加新记录的方式。您可以为此使用该applyTransaction()功能（我认为这种用途被称为updateRowData()）。

var newItems = [createNewRowData(), createNewRowData(), createNewRowData()];
var res = this.gridApi.applyTransaction({
  add: newItems,
  addIndex: addIndex,
});

上面的代码来自他们的例子。

Answer 4

找到了解决办法。可能是我失去了一些功能并且会有一些错误，但对我来说它现在可以工作了。

AddRecord(data) {
    this.records.push(data);
    var id = this.records.length-1;
    var node = {childIndex:id, data: this.records[id], firstChild: false, id:id, lastChild: false};
    this.gridOptions.api.grid.inMemoryRowController.rowsAfterMap.push(node);
    this.gridOptions.api.rowRenderer.refreshView(id);
    this.gridOptions.api.hideOverlay();
}