如何以编程方式在 ag-Grid 中选择多行？答案

【问题标题】：How can I programmatically select multiple rows in ag-Grid?如何以编程方式在 ag-Grid 中选择多行？
【发布时间】：2020-02-08 03:25:27
【问题描述】：

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

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 中的每一行都被选中，但现在，只有tempSelected 数组中的最后一个 id 被选中，其他的都没有。

我已设置rowSelection = 'multiple'，因此不应仅限于 1 个选项。我还尝试根据我阅读的here on ag-grid's website 将node.setSelected(true); 更改为node.setSelected(true, false);，但这并没有改变结果。

如何一次选择多个节点？

【问题讨论】：

node.id 类型是否与 tempSelected 数据类型相同？
@Aamir 是的，我在 if 语句中放了一个 console.log 语句，当 tempSelected 有 3 个值时，日志打印 3 次。
这很奇怪，我一直在做类似的事情并且它有效，只是为了确认，您正在设置 gridOptions.rowSelection = 'multiple' ？

标签： angular typescript ag-grid ag-grid-angular

【解决方案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 上创建了一个演示。

【讨论】：