Question

如何根据行数调整角度ui-grid（the new one）？奖金问题，最多显示最大高度或最大行数？

Answer 1

这是完整的动态UI-Grid实现。

使用分页选项和分组。

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"
    useLibrary 'org.apache.http.legacy'
    ...
}

功能：

$scope.gridOptions = {
enableFiltering: true,
paginationPageSizes: [10, 25, 50, 100, 500],
paginationPageSize: 10,
onRegisterApi: function(gridApi) {
  $scope.gridApi = gridApi;
  $scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
  $scope.gridApi.treeBase.on.rowExpanded(null, function(row) {
    updatePagination(row.treeNode.children.length);
  });
  $scope.gridApi.treeBase.on.rowCollapsed(null, function(row) {
    updatePagination(-row.treeNode.children.length);
  });
}

};

不要忘记注入function updatePagination(rowsDifference) { //updating pagination will trigger singleFilter where the height is being reset $scope.gridOptions.paginationPageSizes = [$scope.gridOptions.paginationPageSize + rowsDifference, 25, 50, 100, 500]; $scope.gridOptions.paginationPageSize = $scope.gridOptions.paginationPageSize + rowsDifference; } //you can name the function anything, I was doing global external filtering inside this, so just named this. $scope.singleFilter = function(renderableRows) { $timeout(function() { var newHeight = ($scope.gridApi.grid.getVisibleRowCount() * 30) + 145; angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px'); }, 10); return renderableRows; }依赖项

HTML

'ui.grid.grouping', 'ui.grid.autoResize', 'ui.grid.pagination'

Working PLUNKER

Answer 2

好的，这不是完美的，但它可能会给你一个想法。

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      reSize(data.length);
    });

  var reSize = function (rows) {
    // This will adjust the css after the Data is loaded
    var newHeight =(rows*30)+60;
    angular.element(document.getElementsByClassName('grid')[0]).css('height', newHeight + 'px');

  };

加载数据后，将使用加载的行数触发reSize（data.length）。

在reSize（）中，我只希望一行高度为30px，并为标题和边框添加一个额外的偏移量（这是一种疯狂的猜测）。

看看这个 PLUNKER要看到它的动态。

Answer 3

我实际上也遇到了同样的问题，并通过向rowExpandedBeforeStateChanged事件添加事件处理程序来解决此问题，该事件处理程序更新了gridOptions的expandableRowHeight（请参见here）。

示例：

sum(x(2:end)^2)

Answer 4

我能够使可扩展行高度动态化，并且它根据子网格中的行进行展开。我也在为可扩展和父网格使用外部分页选项。可能是我在这个话题上错了，或者报道了bubg。但是使用expandedRowHeight，我可以设置可扩展网格的动态高度。

我像这样设置expandedRowHeight，它适用于我的要求。一旦调用事件按照分页

设置该数据，就会设置此项

`

gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                            subgridpaginationOptions.pageNumber = newPage;
                            subgridpaginationOptions.pageSize = pageSize;
                            prepareData()
                        });`

```

if (angular.isDefined($scope.childRow.entity.subGridOptions.data)) {
                rows = $scope.childRow.entity.subGridOptions.data.length;
            }

            if (rows != undefined) {
                $scope.childRow.expandedRowHeight = 90 + ((rows) * 30);
            }

```

Answer 5

根据行设置UI-Grid的手动高度 如果没有解决方案可以尝试这个，调用gridHeight（）来自已注册的onRegisterApi或watchcollection的函数，该函数将继续更改。

function gridHeight() {
    //timeout function is used due to late updation of $scope.gridApi.core.getVisibleRows()
    $timeout(function () {
        // 40: header height
        // 30: height for each row


        const visibleRowHeight = 40 + (30 * $scope.gridApi.core.getVisibleRows().length);
        if (visibleRowHeight > 280) {
            vm.totalHeight = 280;
        }

        else {
            vm.totalHeight = visibleRowHeight;
        }
        //Adjust your height max and min accordingly like i did

    }, 200);
}

查看：

<div id="grid" ui-grid="gridOptions" class="grid" ui-grid-auto-resize ui-grid-resize-columns ui-grid-selection ng-style="{height: vm.totalHeight+'px'}"></div>

Angular UI-Grid（新的） - 基于行的动态/自动调整高度

5 个答案: