如果行具有非常量的高度,则角度 ui-grid 自动高度 [英] angular ui-grid auto height if rows have non-constant height
问题描述
我正在尝试使 angular ui-grid 自动调整高度,以便在不需要滚动条的情况下显示所有行,但如果网格中只有几行,则不会浪费空间.有人问过类似的问题(Angular ui-grid 动态计算网格的高度),但问题的前提是行高是恒定的.如果行高不同(例如,因为您启用了自动换行),则该问题的公认解决方案 (https://stackoverflow.com/a/28706349/877570) 将不起作用,因为该问题的解决方案假定行高不变.如果我有一个包含大量文本的单元格,并且文本换行到下一行,则行高不同.
I'm trying to make angular ui-grid automatically resize the height so that all rows are shown without the need of its scrollbar, but without wasting space if there are only a couple rows in the grid. Someone has asked a similar question (Angular ui-grid dynamically calculate height of the grid), but the question presupposes that the row heights are constant. If the row heights are different (for example, because you have word-wrap enabled), then the accepted solution to the problem (https://stackoverflow.com/a/28706349/877570) won't work, because the solution as does the question assumes constant row height. If I have a cell with a large amount of text in it, and the text wraps to the next line, then that rows height is different.
我在这里找到了用户 anhkind 的可能解决方案:(https://github.com/angular-ui/ui-grid/issues/1735)
I found a possible solution by the user anhkind here: (https://github.com/angular-ui/ui-grid/issues/1735)
.ui-grid, .ui-grid-viewport {
height: auto !important;
}
当然,minRowsToShow 和virtualizationThreshold 应该设置为列表的大小."
"And of course minRowsToShow and virtualizationThreshold should be set to the size of the list."
但是,当我部署他的解决方案时,网格需要更长的时间来呈现.
However, when I deploy his solution, it takes a much longer time for the grid to render.
有人知道如何解决这个问题或有其他解决方案吗?
Does anyone know how to address this or have an alternative solution?
推荐答案
$scope._minRows = 10;
$scope._maxRows = 10;
// Lots of Grid Options, plus data setting going on here.
$scope.agendaItemsGridOptions.onRegisterApi = function(gridApi) {
//set gridApi on scope
$scope.gridApi = gridApi;
});
var setMinRowsLogic = function() {
$scope.gridApi.grid.options.minRowsToShow = $scope._minRows;
if (!_.isUndefined($scope.agendaItemsGridOptions.data)) {
var len = $scope.agendaItemsGridOptions.data.length;
if (len > $scope._maxRows) {
$scope.gridApi.grid.options.minRowsToShow = $scope._maxRows;
} else
if (len < $scope._minRows) {
$scope.gridApi.grid.options.minRowsToShow = $scope._minRows;
} else {
$scope.gridApi.grid.options.minRowsToShow = len;
}
}
};
这篇关于如果行具有非常量的高度,则角度 ui-grid 自动高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!