0

这个问题已经在这里问过Angular ng-grid row height

但是如果我们使用 CSS 来解决影响页面响应和 ng-grid 的标题功能(如排序等)的问题,那都不能满足我的要求。

.ngCell  {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ngRow {
  display : table-row;
  height: auto !important;
  position: static;
}

.ngCellText{
  height: auto !important;
  white-space: normal;
  overflow:visible;
}

在不影响页面响应性的情况下有任何解决方案,必须通过纯 java 脚本/angularjs/css 来解决

4

1 回答 1

1

我已经实现了一个简单的解决方案,可以严格根据可见行动态更改表格的高度。我正在使用 Ui-Grid-Unstable v3.0

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

希望这可以帮助!

于 2015-07-29T16:49:26.917 回答