ng-grid自动/动态高度

Question

如何让ng-grid根据页面大小自动调整其高度？ng-grid网站上的文档使用固定高度.我见过的最佳解决方案来自此链接:

.ngViewport.ng-scope {
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer {
    width: auto !important;
}

这不适用于服务器端分页.我已经从ng-grid的站点复制了服务器端分页示例,并应用了上面的css,但正如您所看到的,只显示了前6行:http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K？p =预习

{height:100%}不起作用......

Answer 1

您可以尝试使用ng-grid Flexible Height Plugin,您只需将此插件添加到网格选项中的plugins属性中,他将负责其余部分.

例:

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    plugins: [new ngGridFlexibleHeightPlugin()]
};

实例:http://plnkr.co/edit/zNHhsEVqmpQmFWrJV1KQ？p = preview

Answer 2

如果您不想添加任何插件,我已经实现了一个简单的解决方案,可以严格根据可见行动态更改表的高度.我正在使用Ui-Grid-Unstable v3.0.无需触摸CSS.

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

希望这可以帮助!