Question

我使用新的ui-grid（重写ng-grid）并且根本无法使动态高度工作。我已经查看了有关ng-grid的所有问题，但没有一个答案似乎有效。有没有人成功做到这一点？

Answer 1

对于任何在这里疯狂搜索有效的东西（像我一样）的人来说，这对我来说是基于https://github.com/angular-ui/ng-grid/issues/1735#issuecomment-61319601的3.0.0-RC.18-7774d30的诀窍：

在控制器中

$scope.gridOptions = {
    ...,
    // just registering the api as usual
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
};

// Called when fetching new rows from $http, but you could also use a $watch
// NOTE: using gridOptions.data.length makes the list too long for some reason
$scope.height = ((rows.length + 1) * 30) + 'px';
$scope.gridApi.grid.gridHeight = ((rows.length + 1) * 30);

部分

<div ui-grid="gridOptions" class="grid" ng-style="{ 'height': height }" ></div>

我首先包含了你在所有其他问题中看到的 ui-grid-auto-resize ，但这个hacky解决方案似乎没有必要（？）

Answer 2

我已经实现了一个简单的解决方案，只根据VISIBLE行动态更改高度。

我的HTML看起来像：

<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>

在你的控制器中添加：

$scope.$watch('gridApi.core.getVisibleRows().length', function() {
    if ($scope.gridApi) {
        $scope.gridApi.core.refresh();
        var row_height = 30;
        var header_height = 31;
        var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
        $('.grid').height(height);
        $scope.gridApi.grid.handleWindowResize();
    }
});

要关闭滚动，请在初始化gridOptions的位置添加以下行：

enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,

确保将uiGridConstants传递给您的控制器：

angular.module('app').controller('mainController', function($scope, uiGridConstants) { ...

希望这有帮助！

ui-grid（不是ng-grid）无法获得动态高度工作

2 个答案: