如何强制 ag-grid 滚动到选定/突出显示的行位置

Posted 2023-03-06

【中文标题】如何强制 ag-grid 滚动到选定/突出显示的行位置

【英文标题】：how to force the ag-grid to scroll to the selected/highlighted row position

【发布时间】：2018-12-24 09:05:45

【问题描述】：

我们正在使用ag-grid，我需要根据ag-grid 中选定的行位置在子窗口中显示滚动条。请找到下面的 plunkr 并单击 source_id 这是一个编辑页面，我需要根据窗口弹出屏幕上的选定/突出显示的行显示滚动条。

在我的代码中滚动条正在工作，但它没有根据子窗口中的选定/突出显示的行显示确切的滚动条位置。请提供输入，以便使用ag-grid根据选定/突出显示的行位置在子窗口中显示滚动条。

Plunkr url

注意：它必须像 'ag-body-viewport' div 类中的选定行位置一样自动滚动。

按照以下步骤操作：

1)In plunker click on preview button.
2)Click on any source_id in ag-grid.
3)Once click the source_id popup window will be displayed.
4)In popup window another grid will be displayed with highlighted row with respective of   source_id.
5)My query is like in this particular window ,how to scroll the scroll bar automatically as per highlighted/selected row postition .

【参考方案1】：

以下是我如何使用 Angular 和 agGrid v23 选择特定 agGrid 行并确保其可见：

  let IDofRowToSelect = 123;

  this.gridApi.forEachNode((node) => 
      node.setSelected(node.data.id == IDofRowToSelect);
      if (node.data.id == IDofRowToSelect) 
          this.gridApi.ensureIndexVisible(node.rowIndex, 'middle');
      
  );

【参考方案2】：

Angular 8 和 ag-grid 20.2（企业）的另一种方法-

scrollToSelectedRow()
this.gridApi.ensureIndexVisible(this.gridApi.getSelectedNodes()[0].rowIndex,null);

ensureIndexVisible 采用 2 个参数，即 rowIndex(integer) 和 position('top','bottom',null 等)。 https://www.ag-grid.com/javascript-grid-api/#scrolling

【参考方案3】：

虽然现在回复为时已晚，但考虑到这可能对从事 Angular 工作的人有所帮助。

goToSelected() 
    let addedNode :any []= Object.values(this.gridApi.getModel().getCopyOfNodesMap())
        .filter(//logic to fetch row on which you want to scroll to)
    if(addedNode !==null && addedNode !=undefined && addedNode.length >0)
      let toBeFocused:number = addedNode[0].rowIndex;
      this.gridApi.setFocusedCell(toBeFocused, 0);
      this.gridApi.ensureIndexVisible(toBeFocused);
      this.gridApi.getRowNode(toBeFocused).setSelected(true, true);
    

【参考方案4】：

如果您查看scrolling section of ag-grid api，您就会知道如何处理它。

您可以将 getRowStyle 函数更新为如下内容：

  function getRowStyle(params) 
    ....
      if (params.data.source_id.trim() === $scope.source_id.trim()) 
        colorToReturn = 
          'background-color': 'orange'
        ;
        $scope.gridOption.api.ensureIndexVisible(Number(params.data.source_id));
      
    ....
  ;