Ag-grid 在 Master/Detail 组件中设置 autoheight

Posted 2023-03-06

【中文标题】Ag-grid 在 Master/Detail 组件中设置 autoheight

【英文标题】：Ag-grid set autoheight in Master/Detail component

【发布时间】：2018-03-21 13:35:23

【问题描述】：

假设我们需要设置 ag-grid 组件的自动高度，可以通过将 gridOptions 设置为 domLayout="autoHeight" 轻松完成。这适用于单个组件，但对于可以扩展高度的主从（父/子）组件，这不起作用。

同样的问题： https://github.com/ag-grid/ag-grid/issues/205

我需要深入调整它的 css 但仍然无法使其工作，

样式参考：https://www.ag-grid.com/javascript-grid-styling/

Ag 网格 DOM 布局：https://www.ag-grid.com/javascript-grid-width-and-height/#gsc.tab=0

重现示例： https://github.com/ag-grid/ag-grid-vue-example（参见主/详细信息）

调整 gridOptions getRowheight 或其嵌入的 css

相关的css：

.ag-root 
/* set to relative, so absolute popups appear relative to this */
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
/* was getting some 'should be there' scrolls, this sorts it out */
  overflow: hidden;


.ag-body 
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

https://github.com/ag-grid/ag-grid/blob/master/dist/styles/ag-grid.css

里面还有一个笨蛋：

https://www.ag-grid.com/javascript-grid-master-detail/#gsc.tab=0

作者的另一条线索：https://www.ag-grid.com/javascript-grid-row-height/index.php#gsc.tab=0

固定行的高度 固定行的行高完全按照 有一个区别的正常行 - 不可能动态 设置后更改高度。但是，这很容易解决 再次设置固定的行数据以重置行高。 再次设置数据对于固定行来说不是问题，因为它不是 如果数据被重置，会影响滚动位置、过滤、排序或分组打开/关闭>位置。

【参考方案1】：

您可以动态计算行高。

getRowHeight: function (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 60;
    

你可以在 ag-grid 的官方文档中找到这个example。

【讨论】：

他们将这种方法称为动态的，我不明白这是如何动态的，我们能够动态设置细节网格的高度，而是静态分配行的高度； ~28 是细节网格的情况，60 是主网格的情况。我正在寻找一种更动态的方式，即具有可变高度的行并完全避免垂直滚动细节网格。我使用 autoHeight，它适用于普通网格，但不适用于主细节。您是否知道任何更具体的解决方法？如果您需要详细信息，我确实有一个开放的question，

（一年后..）是的，我想知道同样的事情....如何让子网格只占用所需的高度，以及如何添加 替代样式给他们。你会认为现在这会更容易......

【参考方案2】：

对于在 2021 年末及以后发现此问题的任何人，现在 gridOptions 中的 detailRowAutoHeight 属性将实现提问者所需的结果。

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

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

    // other grid options ...