以编程方式选择和取消选择Ag-grid中的行

时间:2018-10-17 01:19:09

标签: typescript ag-grid

我正在根据某些条件在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中选择或取消选择某些行?

1 个答案:

答案 0 :(得分:0)

一种可能的方法是手动添加和删除eventListener,以便在某些操作/场景中具有更多控制权:

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

  • addEventListener(eventType:string,listener:Function):添加事件监听器。当前仅支持rowSelected事件。
  • removeEventListener(eventType:字符串,侦听器:Function)删除事件侦听器。