【问题标题】:angular ui-grid auto height if rows have non-constant height如果行具有非恒定高度,则角度 ui-grid 自动高度
【发布时间】:2016-10-29 04:04:12
【问题描述】:

我正在尝试使角度 ui-grid 自动调整高度,以便在不需要滚动条的情况下显示所有行,但如果网格中只有几行,则不会浪费空间。有人问过类似的问题(Angular ui-grid dynamically calculate height of the grid),但问题的前提是行高是恒定的。如果行高不同(例如,因为您启用了自动换行),那么问题的可接受解决方案 (https://stackoverflow.com/a/28706349/877570) 将不起作用,因为问题的解决方案假定行高恒定。如果我有一个包含大量文本的单元格,并且文本换行到下一行,那么该行的高度是不同的。

我在这里找到了用户 anhkind 的可能解决方案:(https://github.com/angular-ui/ui-grid/issues/1735)

.ui-grid, .ui-grid-viewport {
  height: auto !important;
}

“当然 minRowsToShow 和 virtualThreshold 应该设置为列表的大小。”

但是,当我部署他的解决方案时,渲染网格需要更长的时间。

有人知道如何解决这个问题或有替代解决方案吗?

【问题讨论】:

    标签: angular-ui-grid


    【解决方案1】:
        $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;
                }
            }
        };
    

    【讨论】:

    • 您可以设置_minRows = 1,如果没有数据,它将始终至少为一行。否则,它将始终是 .data[] 的大小,最大为 _maxRows(您可以将其设置为高或更改逻辑,使其始终是数据 [] 的占用)。
    • 我不使用你建议的css规则,因为你写的原因。
    • 最后一条评论,只要 .data[] 被修改,就调用 setMinRowsLogic()。
    • 是的,但是如果行高不是恒定的(因为某些行的高度比其他行高,因为单元格中的文本太长以至于换行到下一行),然后设置minRowsToShow 到 data.length 不会使网格高度足够高。
    • 点头。作为一名 UI 设计师,我不太喜欢包装数据。我认为在这些单元格上我创建了一个气泡,它将显示所有数据,并指示有更多数据以查看用户是否关心它。只有我。到目前为止,这运作良好,但我可以看到它可能不会。我不认为网格单元是用户应该读取多行的东西。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-10-06
    • 2016-04-15
    • 1970-01-01
    • 1970-01-01
    • 2017-07-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多