如果行的高度不恒定，则角度ui-grid自动高度 [英] angular ui-grid auto height if rows have non-constant height

问题描述

我正在尝试使有角度的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屋！