如何以编程方式 select ag-Grid 中的多行？

Question

我有一个行 ID 数组，存储在 tempSelected 中，我想以编程方式将列表中的每一行设置为 selected。这就是我正在尝试的：

let len = tempSelected.length;
this.gridApi.forEachNode(function (node) {
  for(let i=0; i<len; i++){
    if(node.id === tempSelected[i]){
      node.setSelected(true);
    }
  }
});

在此循环结束时，我希望 tempSelected 中的每一行都被 selected，但是现在，只有 tempSelected 数组中的最后一个 ID 得到 selected，其他的都没有。

我设置了rowSelection = 'multiple'，所以应该不限于1个selection。我也尝试根据我阅读的内容 here on ag-grid's website 将 node.setSelected(true); 更改为 node.setSelected(true, false);，但这并没有改变结果。

我怎样才能同时 select 多个节点？

Answer 1

我猜那是因为您在 ngOnInit 生命周期挂钩或 ag-grid 的 gridReady 事件中处理了行的突出显示。这两个事件都不合适，因为 ngOnInit 挂钩在初始化完成时触发，而 gridReady 在网格本身准备就绪时触发（但数据尚未呈现）。

因此，为了安全起见，假设您想在加载时处理突出显示，您应该改用 firstDataRendered 事件。

对于您的情况，您可以将 firstDataRendered 事件绑定到某个方法，例如 onFirstDataRendered。另外，请确保 rowSelection 绑定到 multiple 以允许多项选择。

<ag-grid-angular
  (firstDataRendered)="onFirstDataRendered($event)"
  [rowSelection]="'multiple'"

  // other events and props
></ag-grid-angular>

还有你的 component.ts,

onFirstDataRendered(params) {
  let len = tempSelected.length;
  this.gridApi.forEachNode(node => {
    for (let i=0; i<len; i++) {
      if(node.id === tempSelected[i]){
        node.setSelected(true);
      }
    }
  });
}

我已经在 here 上创建了一个演示。

如何以编程方式 select ag-Grid 中的多行？

How can I programmatically select multiple rows in ag-Grid?

typescript

ag-grid

angular

ag-grid-angular