如何强制 ag-grid 滚动到 selected/highlighted 行位置

Question

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

在我的代码中，滚动条工作正常，但它没有根据子 window 中的 selected/highlighted 行显示确切的滚动条位置。并且请提供输入以使用 ag-grid.

根据 selected/highlighted 行位置在子 window 中显示滚动条

Plunkr url

注意：它必须像 'ag-body-viewport' div class.

中选定的行位置一样自动滚动

按照以下步骤操作：

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

Answer 4

以下是我如何 select 一个特定的 agGrid 行，并确保它可见，使用 Angular & agGrid v23:

  let IDofRowToSelect = 123;

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

如何强制 ag-grid 滚动到 selected/highlighted 行位置

how to force the ag-grid to scroll to the selected/highlighted row position

javascript

css

jquery

angularjs

ag-grid