Ag 网格删除行和更新表答案

【问题标题】：Ag grid delete row and update tableAg 网格删除行和更新表
【发布时间】：2021-11-04 15:00:14
【问题描述】：

我为 ag 网格创建了一个具有删除功能的单独组件。单击删除按钮时，删除方法接收到该单行数据，并且我能够进行删除调用。现在如何在删除后更新表？如果我可以从表中过滤掉已删除的行并将其发送回表，我在考虑而不是再次对后端进行 api 调用以再次获取数据。但是，由于我在一个单独的组件中，我没有整个表格数据而只有一行数据，我该怎么做呢？

HTML

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 500px;"
    class="ag-theme-alpine"
    domLayout='autoHeight'
    [rowData]="rowData"
    [gridOptions]="gridOptions"
    [frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>

buttonRenderer 组件代码

public onDelete = async ($event) => {
  if ((await this.teamService.deleteTeamMember(this.params.node.data._id)) === false) 
{
  return;
}
  this.notification.success('Team member deleted successfully.');
//this.team = this.team.filter((item) => item._id !== customer._id);
};

网格组件

this.gridOptions = {
        suppressMenuHide: false,
        columnDefs: [
        { headerName: 'Name', field: 'fullName', width: 150, sortable: true, filter: true },
        { headerName: 'Email', field: 'email', width: 170, sortable: true, filter: true, tooltipField: 'email'},
        {
          suppressMovable: true,
          headerName: 'Status',
          width: 100,
          field: 'disabled', cellRenderer: (params) => 
          params.data.disabled === false ? `<img src="assets/images/check.svg">` : `<img src="assets/images/minus.svg">`
        },
        { 
          headerName: 'Last Login', 
          field: 'lastLoginDate', 
          sortable: true, 
          filter: true,
          cellRenderer: (params) => params.data.lastLoginDate ? 
          new Date(params.data.lastLoginDate).toISOString().split('T')[0] + 
          `<img src="assets/images/clock.svg">` +
          new Date(params.data.lastLoginDate).toISOString().split('T')[1] : ``
        },
        {
          headerName: 'Created',
          width: 130,
          field: 'dateCreated',
          cellRenderer: (params) => new Date(params.data.dateCreated).toISOString().split('T')[0],
          sortable: true, 
          filter: true
        },
        {
          cellRenderer: 'buttonRenderer',
          cellRendererParams: {
            onClick: this.onBtnClick1.bind(this),
            label: 'Click 1'
          }
        },
       ],
      }

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

如果它是一个简单的表，那是一个没有实现虚拟滚动或延迟加载的表。您可以尝试在调用删除表中记录的函数后立即使用其索引从rowData拼接删除的记录，然后在拼接后再次将行设置到网格中。

您可以利用网格 API 来实现这一点，如以下 StackBlitz 项目所示。

【讨论】：

我不确定在哪里可以使用这个gridOptions.api.setRowData(gridOptions.rowData)，因为您看到按钮呈现是一个单独的组件。我在stackblitz上遵循了这个例子stackblitz.com/edit/…
我已经更新了我的答案并添加了一个项目的链接，在该项目中，使用Cell Renderer 将按钮创建为一个单独的组件。另外，我注意到在定义了 ag-Grid 表的 component.html 文件中，您没有为 gridReady 事件添加事件绑定。

【解决方案2】：

随着 api 调用成功，您可以使用以下方法更新/删除/添加：-

https://www.ag-grid.com/angular-data-grid/data-update-transactions/

this.gridApi?.applyTransaction({ remove: [{ id: rowId }] });

【讨论】：