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

Question

假设我们需要设置ag-grid组件的自动高度,可以通过设置gridOptions来轻松完成domLayout="autoHeight".这适用于单个组件,但对于可以扩展高度的主 - 细节(父/子)组件,这不起作用.

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

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

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

Ag grid 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

固定行的高度固定行的行高与正常行完全相同,只有一个区别 - 一旦设置,就无法动态更改高度.但是,通过再次设置固定行数据可以轻松解决这个问题,从而重置行高.再次设置数据对于固定行不是问题,因为它不会影响滚动位置,过滤,排序或组打开/关闭>位置,就像重置数据时一样.

Answer 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 的官方文档中找到这个例子。