有没有办法在 ag-grid 中将 detailRowHeight 道具设置为 100%？答案

【问题标题】：Is there way to set detailRowHeight prop to 100% in ag-grid?有没有办法在 ag-grid 中将 detailRowHeight 道具设置为 100%？
【发布时间】：2020-02-21 04:23:44
【问题描述】：

最近开始研究主细节结构角度 ag-grid。该结构有两级主从嵌套。我需要修复 inner - 2 网格的高度，以便它们占据屏幕上所有可用的空间。目前，ag-grid 将其默认为 300 像素，并且在 1920x1200 屏幕分辨率的监视器上会出现大量空白或未使用的空间。我还需要为所有网格设置固定标题。

任何想法或指针将不胜感激......

更新：在此处参考来自 ag-grid 的 plunker 示例的分叉版本 - https://next.plnkr.co/edit/yUzo4EqONEmgCmIw 这是主从网格的简单基本设置。

请注意：我没有设置任何详细信息行高，并且只设置了一条记录以显示在网格中以测试问题。

如果您运行 plunker 代码并在单独的窗口中查看结果，请注意内部/子网格并未占用其下方的所有可用空间。换句话说，它不会占用父容器（主容器的详细信息行）中可用的空间/高度。默认的 300px 主 detailRowHeight 正在为内部网格固定高度。此外，从文档中，detailRowHeight 道具似乎没有采用类似于 100% 或 100vh 的东西，并且只采用固定像素数。添加了下面示例的图片以及我提到的高度/未使用空间

我们有不同的分辨率供用户查看网格中的数据，并且内部网格的高度需要自动调整以获取最大值。在网格中显示大部分信息的可用空间。

【问题讨论】：

可能不会在这方面受到关注——而不是 SO 发布规则。您需要提供代码和更具体的问题。你扔掉了一些只描述的东西，没有代码 - 我一直在 ag-grid 工作，可能可以帮助你，但不能用这个小信息......
感谢您的检查。我添加了更多细节和基本代码示例，希望对您有所帮助。

标签： ag-grid ag-grid-angular

【解决方案1】：

你可以尝试这样的事情，我从文档中提取了它：

在您的 component.ts 文件中添加此方法。如果它是详细信息行，它将应用与其他行不同的计算。

  public rowHeight(params) {
        if (params.node && params.node.detail) {
            var offset = 80;
            var allDetailRowHeight = params.data.callRecords.length * 28;
            return allDetailRowHeight + offset;
        } else {
            // otherwise return fixed master row height
            return 25;
        }
    };

在您的模板中添加以下内容：[getRowHeight]="rowHeight"

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [masterDetail]="true"
  [detailCellRendererParams]="detailCellRendererParams"
  [getRowHeight]="rowHeight"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

希望这会让您继续前进。祝你好运！

https://www.ag-grid.com/javascript-grid-master-detail/#detail-row-height

【讨论】：

是的，也这样做了。但是，无法为网格设置固定标题。内部网格应该扩展直到达到最大值。屏幕中的剩余高度。此功能将为您提供详细信息行的完整计算/动态高度，并且页面可能会变成长滚动条。

【解决方案2】：

所以我没有一个很好的、完整的解决方案给你，但作为一个起点，我会使用 CSS 来覆盖 ag-grid 设置的样式 - 我认为 detailRowHeight 不会有帮助。

这是我在 index.html 中放入的一些简单 CSS 接近您想要的内容。您可以使用 !important 覆盖 ag-grid 样式，或者您可以在 ag-grid 之后使用 javascript 设置 CSS。在这种情况下，我更喜欢 !important 并且不必担心时间问题。 https://next.plnkr.co/edit/mmXBBJE5Wa1JrX7v

我不打算解决的问题是让它动态填充可用空间，具体取决于所选的行、滚动位置等。我想不出任何简单的方法来实现这一点 - 我这样做了类型的东西经常在网格中，最终编写 javascript 来计算可用空间，然后在 javascript 中设置 CSS。

【讨论】：

感谢您的回复。我确实在 css 中进行了修复——比如——:host >>> div[ref="eFullWidthContainer"] { height: 100% !important; } :host >>> div[row-id^="detail"] { height: 98.5% !important; } 这对一行很有用，但是当你有几行/记录显示它会变得非常混乱。您可以更改 plunker 中的数据并注意扩展的行，然后在单独的窗口中。网格混乱，标题不显示。 :(
是的，这就是我所说的选定行、滚动位置等 - 除了在元素上使用 DOM 选择器和 clientHeight 来计算可用之外，我没有任何方法可以处理它在您的代码中为自己留出空间 - 并根据我的示例或您一直使用的选择器适当地设置 CSS。 height: calc(100% - 40px) 我认为会比 98.5% 更好，我只是用 calc() 精确地切掉填充。

【解决方案3】：

在 ag-grid 中，您可以设置自动高度以获取详细信息。

设置网格属性 detailRowAutoHeight=true 以使详细网格动态更改其高度以适应其行。

const gridOptions = {
// dynamically set row height for all detail grids
detailRowAutoHeight: true,

// other grid options ...

}

但是，如果您提供自己的详细信息组件... detailCellRenderer: 'MyOwnDetailsComponent', 然后，它可能不起作用，您仍然需要通过...提供网格选项高度详细信息内容... detailRowHeight: 560,

请参阅 ag-grid 文档here

【讨论】：