我可以将 ag-grid full-width 行设置为具有自动高度吗？

Question

我正在尝试在我的数据集末尾呈现一组脚注。对于要用于设置高度的列，每个脚注都应该是 full-width row. On the docs page for row height, it says that you can set an autoHeight property。 Full-width 行不与任何列相关联，因此我认为没有地方可以设置自动高度属性.

作为参考，这是我的单元格渲染器，如果数据 object 中的标志为真，则会调用它。

import { Component } from '@angular/core';
import { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';

@Component({
  template: '',
})
export class FootnoteRendererComponent implements ICellRendererComp {
  cellContent: HTMLElement;

  init?(params: ICellRendererParams): void {
    this.cellContent = document.createElement('div');
    this.cellContent.innerHTML = params.data.title;
    this.cellContent.setAttribute('class', 'footnote');
  }

  getGui(): HTMLElement {
    return this.cellContent;
  }

  refresh(): boolean {
    return false;
  }
}

脚注（上面的“标题”属性）可以是一行或几行，具体取决于它的长度和浏览器的 window 大小。也可能有几个脚注。有没有办法为每个脚注行设置自动高度？感谢您的帮助！

Answer 1

不确定 CSS autoHeight 是否可以使用，但 here is some example 用于动态计算高度。查看 getRowHeight 函数，它适用于任何行（full-width 也是）：

 public getRowHeight: (
    params: RowHeightParams
  ) => number | undefined | null = function (params) {
    if (params.node && params.node.detail) {
      var offset = 80;
      var allDetailRowHeight =
        params.data.callRecords.length *
        params.api.getSizesForCurrentTheme().rowHeight;
      var gridSizes = params.api.getSizesForCurrentTheme();
      return (
        allDetailRowHeight +
        ((gridSizes && gridSizes.headerHeight) || 0) +
        offset
      );
    }
  };

Answer 2

这是我最终得到的解决方案，尽管我也喜欢@LennyLip 的回答。它使用了 Text Wrapping in ag-Grid Column Headers & Cells.

中的一些想法

问题分为两个部分 - 1) 计算高度，以及 2) 知道何时计算高度。

1) 计算高度

我更新了脚注的单元格渲染器，为每个脚注文本节点添加了一个 ID，并在下面的函数中使用了它。

const footnoteRowHeightSetter = function(params): void {
  const footnoteCells = document.querySelectorAll('.footnote .footnote-text');
  const footnoteRowNodes = [];
  params.api.forEachNode(row => {
    if (row.data.dataType === 'footnote') {  // Test to see if it's a footnote
      footnoteRowNodes.push(row);
    }
  });

  if (footnoteCells.length > 0 && footnoteRowNodes.length > 0) {
    footnoteRowNodes.forEach(rowNode => {
      const cellId = 'footnote_' + rowNode.data.id;
      const cell = _.find(footnoteCells, node => node.id === cellId);
      const height = cell.clientHeight;
      rowNode.setRowHeight(height);
    });
    params.api.onRowHeightChanged();
  }
};

总而言之，该函数获取 DOM 中作为脚注文本节点的所有 HTML 节点。然后它获取 table 的所有脚注行节点。它遍历那些行节点，将每个节点与其 DOM 文本匹配。它使用文本节点的 clientHeight 属性并将行节点高度设置为该值。最后，它调用 api.onRowHeightChanged() 函数让 table 知道它应该重新定位并绘制行。

知道何时计算高度

当我将gridOptions.getRowHeight 属性设置为上面的函数时，它不起作用。函数触发时，脚注行尚未呈现，因此无法获取文本节点的 clientHeight，因为它们不存在。

相反，我使用 gridOptions 中的这些事件处理程序触发了函数。

onFirstDataRendered: footnoteRowHeightSetter,
onBodyScrollEnd: footnoteRowHeightSetter,
onGridSizeChanged: footnoteRowHeightSetter,

onFirstDataRendered 涵盖了当网格首次呈现时脚注在屏幕上的情况（短 table）。
onBodyScrollEnd 涵盖脚注最初不在屏幕上但用户滚动查看它们的情况。
onGridSizeChanged 涵盖改变脚注文本的环绕和高度的网格大小调整情况。

这对我有用。我喜欢@LennyLip 的回答，并在 select 回答之前仔细研究它。

我可以将 ag-grid full-width 行设置为具有自动高度吗？

Can I set an ag-grid full-width row to have autoHeight?

ag-grid

ag-grid-angular

1) 计算高度

知道何时计算高度