以编程方式选择和取消选择 ag-grid 中的行答案

【问题标题】：Programmatically selecting and deselecting row in ag-grid以编程方式选择和取消选择 ag-grid 中的行
【发布时间】：2019-03-21 14:38:50
【问题描述】：

我正在根据某些条件选择和取消选择 ag-grid 中的某些行。我在 onRowDataChanged 事件中执行此操作，该事件将在加载网格并填充行数据后调用。当我试图在 onGridReady 事件中实现这一点时，会在填充行数据之前调用它。所以，我在 onRowDataChanged 事件中这样做了。

这是我对 gridOptions 的实现。

ngOnInit() {
  this.gridOptions = <any> {
    rowSelection: 'multiple',
    onRowSelected: event => {
      // save selected rows in an array for additional work.
    },
    onRowDataChanged: event => {
      if (selectRows) {
         this.gridApi.selectAll();
      } else {
        this.gridApi.deSelectAll();
      }
    }
    onGridReady: params => {
      params.api.sizeColumnsToFit();
    }
  }
}

根据条件正确选择和取消选择行。如果我还想选择或取消选择某些行，我可以使用以下代码：

this.gridApi.getRowNode(index).setSelected(true);
this.gridApi.getRowNode(index).setSelected(false);

但是，我在以编程方式选择和取消选择行时遇到了一个问题。在 this.gridApi.selectAll(); 之后被执行并且网格行都被选中，onRowSelected 事件被触发。并且针对每个行选择和取消选择执行该事件触发时我正在执行的代码。

onRowSelection 事件仅应在用户选择或取消选择复选框时触发。我正在将选定的行保存在一个数组中以发送到服务器。

但是，当我在 onRowDataChanged 期间以编程方式选择或取消选择行时，也会触发 onRowSelection。这将导致该事件的代码被多次执行，并且当我的行数超过 400 行时会对性能产生影响。

如何在不多次触发 onRowSelected 事件的情况下以编程方式选择或取消选择 ag-grid 中的某些行？

【问题讨论】：

你可以为它添加一个plunker。那样跟踪流量会更容易。

标签： typescript ag-grid

【解决方案1】：

一种可能的方法是手动添加和删除 eventListener 以在某些操作/场景中获得更多控制：

https://www.ag-grid.com/javascript-grid-row-node/

addEventListener(eventType: string, listener: Function)：添加事件监听。目前仅支持 rowSelected 事件。
removeEventListener(eventType: string, listener: Function) 移除事件监听器。

【讨论】：

当复选框被点击时，我们如何删除行选择事件的事件监听器？我们需要为此制作自定义复选框吗？

【解决方案2】：

从 ag-grid react 中取消选择选定的行。设置属性选择单一但 rowMultiSelectWithClick={true}

<AgGridReact
rowSelection={"single"}
rowMultiSelectWithClick={true}

【讨论】：