Ag-Grid:无法减少明细行的容器空间

时间:2019-02-21 22:40:45

标签: angular ag-grid master-detail

当在Ag-Grid中显示明细行时,容器的高度似乎是固定的/计算得出的。我可以使用Plunker上的Ag-Grid文档的示例来复制此问题:

此页面上的最后一个Plunker示例: https://www.ag-grid.com/javascript-grid-master-detail/

要复制它,一旦在Plunker中,我单击了V形框以打开子表以查看详细信息行,然后打开DevTools。我检查了子表周围的容器,该容器具有一类“ ag-details”行。我添加了一个高度值,例如50%,但它只会减小行的高度。

Plunker screenshot of issue 因此,子表中大约有2-3行。如何删除子表底部和它下面的父行之间的多余空间?

1 个答案:

答案 0 :(得分:1)

可以为明细行指定高度。但是,您所要求的听起来像是动态高度,您也可以这样做。

例如,您可以在网格选项中定义getRowHeight;

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的文档。 https://www.ag-grid.com/javascript-grid-master-detail/#example-dynamic-detail-row-height