如何仅在 ag 网格中获取可见行？ - 角答案

【问题标题】：How to get only visible rows in ag grid? - Angular如何仅在 ag 网格中获取可见行？ - 角
【发布时间】：2020-12-14 23:27:02
【问题描述】：

我在我的angular 应用程序中使用ag-grid 作为数据网格框架。我找不到任何 api 来仅获取可见行。意思是在屏幕上可见的行并且不包括由于滚动而隐藏的行。

【问题讨论】：

标签： angular ag-grid-angular

【解决方案1】：

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

// 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);
              });
          }
        }

【讨论】：

【解决方案2】：

如下文所述：-

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

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

function getRenderedNodes(): RowNode[];

【讨论】：

【解决方案3】：

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

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);
  });

【讨论】：