Question

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

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

注意：它必须像“ 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 .

Answer 1

如果您看看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));
      }
    ....
  };

Answer 2

尽管回复为时已晚，但考虑到这可能对使用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);
    }

Answer 3

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

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

3 个答案: