3

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

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对象没有更新。

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

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

4

3 回答 3

2

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

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

现在选定的行将被删除。

于 2017-11-23T09:12:54.193 回答
0

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

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

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

    - - 或者 - -

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

于 2017-11-13T20:20:15.410 回答
0

对于遇到这篇文章的人来说，我很久以前就知道了，但是。

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

假设我们有一个带有通用 columnDef 的网格，例如 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] });

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

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

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

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

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

于 2020-03-30T17:23:13.907 回答