Ag-Grid:无法减少详细信息行的容器 space
Ag-Grid: Cannot decrease container space for detail rows
当在 Ag-Grid 中显示详细信息行时,容器似乎有一个 fixed/calculated 高度。我能够使用 Plunker 上的 Ag-Grid 文档示例重现此问题:
本页最后一个 Plunker 示例:
https://www.ag-grid.com/javascript-grid-master-detail/
为了复制它,我在 Plunker 中单击 V 形图标打开子 table 以查看详细信息行,然后打开 DevTools。我检查了子 table 周围的容器,它有一个 class 的 "ag-details" 行。我添加了一个高度值,例如 50%,但它只会降低高度行。
所以我在 sub-table 中有大约 2-3 行。如何删除子 table 底部与其下方父行之间的多余 space?
可以为明细行指定高度。但是你要求的听起来像是一个动态高度,你也可以这样做。
例如,在您的网格选项中,您可以定义 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
当在 Ag-Grid 中显示详细信息行时,容器似乎有一个 fixed/calculated 高度。我能够使用 Plunker 上的 Ag-Grid 文档示例重现此问题:
本页最后一个 Plunker 示例: https://www.ag-grid.com/javascript-grid-master-detail/
为了复制它,我在 Plunker 中单击 V 形图标打开子 table 以查看详细信息行,然后打开 DevTools。我检查了子 table 周围的容器,它有一个 class 的 "ag-details" 行。我添加了一个高度值,例如 50%,但它只会降低高度行。
可以为明细行指定高度。但是你要求的听起来像是一个动态高度,你也可以这样做。
例如,在您的网格选项中,您可以定义 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