ui-grid（而不是ng-grid）無法獲得動態高度工作

Question

我正在使用新的ui-grid（重寫ng-grid）並且根本無法獲得動態高度工作。我已經看過關於這個關於ng-grid的所有問題，但似乎沒有任何答案可行。有沒有人成功做過這件事？

Answer 1

有關的一些作品（像我）一個瘋狂的搜索在這裏結束了任何人，這並獲得成功，我在3.0.0-RC.18-7774d30基於https://github.com/angular-ui/ng-grid/issues/1735#issuecomment-61319601：

在控制器

$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併網自動調整大小你太起初所有其他問題看，但它似乎沒有必要用這種哈克溶液（？）

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) { ... 

希望這有助於！