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

【问题标题】：how to force the ag-grid to scroll to the selected/highlighted row position如何强制 ag-grid 滚动到选定/突出显示的行位置
【发布时间】：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 .

【问题讨论】：

标签： javascript jquery css angularjs ag-grid

【解决方案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));
      }
    ....
  };

【讨论】：