如何在 ag 网格中只获取可见行？ - Angular

Question

我正在使用 ag-grid as a data grid framework in my angular application. I could not find any api 来仅获取可见行。意思是在屏幕上可见的行，不包括因滚动而隐藏的行。

Answer 1

我确实找到了一种使用下面的小脏代码来获取可见行的方法（请阅读评论以了解详细信息）-

// skipping the component decorator and template details
export class GridComponent {
  api: GridApi;
  rowHeight = 48;
  gridBodyHeight;
  scrollPosition = 0;
  visibleRowNodes = []; // this variable holds the visible rows at any moment during the grid's existence

  constructor(private elementRef: ElementRef) {}

  public gridReady(params: GridReadyEvent) {
    this.api = params.api;
    const headerElement = this.elementRef.nativeElement.querySelectorAll('.ag-header');
    const agGrid = this.elementRef.nativeElement.querySelectorAll('ag-grid-angular');
    this.gridBodyHeight = agGrid[0].offsetHeight - headerElement[0].offsetHeight;
    this.rowHeight = this.api.getDisplayedRowAtIndex(0) ? this.api.getDisplayedRowAtIndex(0).rowHeight : this.rowHeight;
    this.handleModeUpdateAndScrollEvent();
    // below call is need to get the visible rows when grid is ready
    this.visibleRowsChange.next({ top: this.scrollPosition });
  }

  // the visible rows only gets changed on
  // modelUpdated and bodyScroll events
  private handleModeUpdateAndScrollEvent() {
    this.gridOptions.onBodyScroll = (event) => {
      if (event.direction === 'vertical') {
        this.scrollPosition = event.top;
        this.visibleRowsChange.next(event);
      }
    };
    this.gridOptions.onModelUpdated = (event) => {
      this.visibleRowsChange.next({ top: this.scrollPosition });
    };

    this.visibleRowsChange
      .pipe(debounceTime(1000))
      .subscribe(v => {
        const topIndex = v.top / this.rowHeight;
        const bottomIndex = ((v.top + this.gridBodyHeight) / this.rowHeight) + 1;
        this.visibleRowNodes = this.api.getRenderedNodes().filter(node => node.rowIndex >= topIndex && node.rowIndex <= bottomIndex);
        console.log(this.visibleRowNodes);
      });
  }
}

Answer 2

我建议将以下变量直接放在 Observable visibleRowsChange 中，以便在浏览器中缩放 in/out 时更新值。

this.visibleRowsChange
  .pipe(debounceTime(1000))
  .subscribe((v) => {
    const headerElement = this.elementRef.nativeElement.querySelectorAll(
      '.ag-header',
    );
    const agGrid = this.elementRef.nativeElement.querySelectorAll(
      'ag-grid-angular',
    );
    this.gridBodyHeight =
      agGrid[0].offsetHeight - headerElement[0].offsetHeight;

    this.rowHeight = this.gridApi.getDisplayedRowAtIndex(0)
      ? this.gridApi.getDisplayedRowAtIndex(0).rowHeight
      : this.rowHeight;
    const topIndex = Math.round(v.top / this.rowHeight);
    const bottomIndex =
      Math.round((v.top + this.gridBodyHeight) / (this.rowHeight + 1)) - 1;

    this.visibleRowNodes = this.gridApi
      .getRenderedNodes()
      .filter(
        (node) => node.rowIndex >= topIndex && node.rowIndex <= bottomIndex,
      );
    console.log(this.visibleRowNodes);
  });

Answer 3

如下文档中所述：-

https://www.ag-grid.com/angular-data-grid/grid-api/

检索渲染节点。由于虚拟化，这将仅包含当前可见行和缓冲区中的行。

function getRenderedNodes(): RowNode[];

如何在 ag 网格中只获取可见行？ - Angular

How to get only visible rows in ag grid? - Angular

angular

ag-grid-angular