使用 api.updateRowData(transaction) 删除一行对数据源没有影响答案

【问题标题】：Deleting a row using api.updateRowData(transaction) has no effect on data source使用 api.updateRowData(transaction) 删除一行对数据源没有影响
【发布时间】：2018-04-26 05:38:45
【问题描述】：

我有一个自定义单元格渲染器来删除给定的实体。

function ActionButtonsCellRenderer() {}

ActionButtonsCellRenderer.prototype.init = function(cellRenderParams) {
    var tempDiv = document.createElement('div');
  
    var deleteButton = document.createElement("a");
    deleteButton.href = "javascript:void(0)";
    deleteButton.innerHTML = "<i class='fa fa-trash'></i>";
    
    tempDiv.appendChild(deleteButton);
    
    deleteButton.addEventListener("click",function(){
        cellRenderParams.api.updateRowData({remove: [cellRenderParams.data]})

    });
    
    this.eGui = tempDiv.firstChild;
};

ActionButtonsCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

它实际上从 GUI 中删除了该行。没问题。

但是当用户使用以下逻辑添加另一行时；

function addRow() {
    var row = {t1 : "test"}
        
    dataSource[dataSource.length] = row;
    agGridOptions.api.setRowData(dataSource);
}

已删除的行在网格中也再次可见。这意味着 dataSource 对象没有更新。

我在这里做错了什么？ dataSource 必须在我的场景中更新。

难道没有我可以使用的双向绑定吗？

【问题讨论】：

我知道这个问题已经有一段时间了，但你有没有想过这个问题？我正在做类似的事情，但我正在使用 Master/Detail 功能。当我展开另一个节点时，该行又回来了（尽管实际上是从实际的 DB 数据源中详细说明的）。当我修改其中一个 a-g 网格示例来执行此操作时，它工作正常，我似乎看不出有什么区别。
我想出了我的问题，以防万一有人遇到这个问题。我的与 Master/Detail 功能有关。删除行时，您必须从明细网格和主数据中删除。一旦我这样做了，我的行将不再出现在网格中。

标签： javascript transactions ag-grid ag-grid-angular

【解决方案1】：

要删除选定的行，请使用此代码，

 this.selectedNodes = this.GridOptions.api.getSelectedNodes();                   
 this.GridOptions.api.removeItems(this.selectedNodes);
 this.GridOptions.api.refreshView();

现在选定的行将被删除。

【讨论】：

removeItems() 和 refreshView() 已弃用。我分别使用了 updaterowData(transaction) 和 redrawRows。
this.GridOptions.api.removeItems(this.GridOptions.api.getSelectedNodes());

【解决方案2】：

Ag-grid 会复制您提供给它的数据。因此，当您使用updateRowData 时，ag-grid 将更新它拥有的数据，而不是您的原始数据数组。这是避免意外结果和原始数据丢失的好设计。

您的问题有两种可能的解决方案：

在您需要更新数据时随时更改您的原始数据 - 这可能会很快变得非常混乱

--- 或 ---
使用 ag-grid 的内置功能，允许它更新行数据，然后当您需要对数据源执行某些操作（例如在 excel 中下载或发送到其他功能）时，请使用 @987654322 @函数来获取ag-grid知道的数据。

【讨论】：

【解决方案3】：

对于看到这篇文章的任何人，我都知道这是很久以前的事了。

我必须在没有 UI 选择的情况下将一行从一个表添加和删除到另一个表

假设我们有一个带有公共 columnDefs 的网格，例如headersName，字段（有字段很重要）等。

我们将有 2 列：

{
   headerName: 'Name',
   field: 'name',
   cellRenderer: params => params.data.name,
   ....
},
{
   headerName: 'Age',
   field: 'age',
   cellRenderer: params => params.data.age,
   ....
},

我所做的是：

const item = {
   'name': 'New name',
   'age': 25,
}

* Remove a row - if the grid already have this item
this.gridApi.updateRowData({ remove: [item] });

* Add row - if the grid doesn't have it
gridApi2 is your seconds grid table api
this.gridApi2.updateRowData({ add: [item] });

添加/删除：[item] - 它必须是数组

如果您由于某些原因需要刷新（有时更改检测器不更新），则有 2 个 AgGrid 刷新 options：刷新单元格 和 重绘行..对于这种情况，我将使用 refreshCells()

this.gridApi.refreshCells({ force: true });

this.gridApi2.refreshCells({ force: true });

使用材料：https://www.ag-grid.com/javascript-grid-data-update/
- 部分：Full CRUD & Bulk Updating
- 方法：方法 2 - 事务

这对我有用。当然，这里我们假设我们有一个网格工作，例如(gridReady)="onGridReady($event)"

【讨论】：