ng-grid自动/动态高度

Question

如何让ng-grid根据页面大小自动调整其高度？ ng-grid网站上的文档使用固定高度。我见过的最好的解决方案来自这个link：

.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=preview

{height：100％}不工作...

Answer 1

你可以尝试使用ng-grid Flexible Height Plugin，你需要做的就是将这个插件添加到网格选项中的插件属性，他会照顾其余的。

实施例：

$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

$（ “gridStyle ”）的CSS（“ 高度”， “”）;

删除您height属性在你的NG网设为您的gridstyle类，然后自动动态高度..

Answer 3

如果你不希望添加任何插件，我实现了一个简单的解决方案来动态改变表的高度严格基于可见行。我正在使用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) { ... 

希望这有助于！

Answer 4

您可以添加自动的风格是这样的：

ng-style="{ 'height': myData.length*34 }"，并myData是

Answer 5

在样式表解决了我的问题，我发现使用这段代码。我禁用了该插件，但它可以工作。

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

.ngTopPanel.ng-scope, .ngHeaderContainer{ 
    width: auto !important; 
} 
.ngGrid{ 
    background-color: transparent!important; 
} 

我希望它可以帮助别人！

Answer 6

在试图为每个网格中的每行存储数据的方法中，添加一个代码来计算单独数组中的网格长度，并将计算出的长度推送到不同的数组。确保网格的索引和数组的索引应该相同，以便我们可以从UI一起访问它。我的方法如下：

    //Stores the calculated height of each grid. 
        $scope.gridHeights = []; 


        //Returns the height of the grid based on the 'id' passed from the UI side. 
        //Returns the calculated height appended with 'px' to the HTML/UI 
        $scope.getHeight = function(id){ 
         if($scope.gridHeights[id]) { 
          return { 
           'height': $scope.gridHeights[id] + 'px' 
          }; 
         }else{ 
          return { 
           'height': '300px' 
          }; 
         } 
        }; 


        for (var idx = 0; idx < $scope.auditData.length; idx++) { 

         //gets the rows for which audit trail/s has to be displayed based on single or multi order. 
         $scope.gridData[idx] = $scope.auditData[idx].omorderAuditTrailItems; 

         //Calculates and pushes the height for each grid in Audit Trail tab. 
         $scope.gridHeights.push(($scope.auditData[idx].omorderAuditTrailItems.length + 2)*30); 


     //IN HTML, set the height of grid as : 
     <div id='orderAuditTrailList'> 
      <div class="row fits-auditTrail" ng-style="getHeight(id)"> 
       <div class="fits-ng-grid" ng-if="auditTrail.omorderAuditTrailItems.length>0" ng-grid="gridOrderAuditTrailList[id]" ng-style="getHeight(id)"></div> 
      </div> 
    </div> 

Answer 7

我想我解决了这个问题，48小时后完美，

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.autoResize']); 
 

 
app.controller('MainCtrl', ['$scope', '$http', '$interval', function($scope, $http, $interval) { 
 

 
    var paginationOptions = { 
 
    pageNumber: 1, 
 
    pageSize: 20, 
 
    }; 
 
    $scope.currentPage = 1; 
 
    $scope.pageSize = paginationOptions.pageSize; 
 
    $scope.gridOptions = { 
 
    rowHeight: 30, 
 
    enableSorting: true, 
 
    paginationPageSizes: [$scope.pageSize, $scope.pageSize * 2, $scope.pageSize * 3], 
 
    paginationPageSize: paginationOptions.pageSize, 
 
    columnDefs: [{ 
 
     name: 'name' 
 
    }, { 
 
     name: 'gender', 
 
     enableSorting: false 
 
    }, { 
 
     name: 'company', 
 
     enableSorting: false 
 
    }], 
 
    onRegisterApi: function(gridApi) { 
 
     $scope.gridApi = gridApi; 
 
     gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) { 
 
     paginationOptions.pageNumber = newPage; 
 
     paginationOptions.pageSize = pageSize; 
 
     $scope.pageSize = pageSize; 
 
     $scope.currentPage = newPage; 
 
     $scope.totalPage = Math.ceil($scope.gridOptions.totalItems/$scope.pageSize); 
 
     }); 
 
    } 
 
    }; 
 

 
    var loadData = function() { 
 
    var url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json'; 
 
    $http.get(url) 
 
     .success(function(data) { 
 
     $scope.gridOptions.totalItems = data.length; 
 
     $scope.totalPage = Math.ceil($scope.gridOptions.totalItems/$scope.pageSize); 
 
     $scope.gridOptions.data = data; 
 
     }); 
 
    }; 
 

 
    loadData(); 
 

 
    // for resize grid's height 
 
    $scope.tableHeight = 'height: 600px'; 
 

 
    function getTableHeight(totalPage, currentPage, pageSize, dataLen) { 
 
    var rowHeight = 30; // row height 
 
    var headerHeight = 50; // header height 
 
    var footerHeight = 60; // bottom scroll bar height 
 
    var totalH = 0; 
 
    if (totalPage > 1) { 
 
     // console.log('hehehehe'); 
 
     if (currentPage < totalPage) { 
 
     totalH = pageSize * rowHeight + headerHeight + footerHeight; 
 
     } else { 
 
     var lastPageSize = dataLen % pageSize; 
 
     // console.log(lastPageSize); 
 
     if (lastPageSize === 0) { 
 
      totalH = pageSize * rowHeight + headerHeight + footerHeight; 
 
     } else { 
 
      totalH = lastPageSize * rowHeight + headerHeight + footerHeight; 
 
     } 
 
     } 
 
     console.log(totalH); 
 
    } else { 
 
     totalH = dataLen * rowHeight + headerHeight + footerHeight; 
 
    } 
 
    return 'height: ' + (totalH) + 'px'; 
 
    } 
 

 
    $interval(function() { 
 
    $scope.tableHeight = getTableHeight($scope.totalPage, 
 
     $scope.currentPage, $scope.pageSize, 
 
     $scope.gridOptions.data.length); 
 
    console.log($scope.tableHeight); 
 
    $scope.gridApi.grid.handleWindowResize(); 
 
    $scope.gridApi.core.refresh(); 
 
    }, 200); 
 

 

 
}]);

.grid { 
 
    width: 600px; 
 
}

<!doctype html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
 
    <script src="http://ui-grid.info/release/ui-grid.js"></script> 
 
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <div ng-controller="MainCtrl"> 
 
    <div ui-grid="gridOptions" ui-grid-pagination id="grid" style="{{tableHeight}}"></div> 
 
    <div> 
 
     <p>Current Page: {{ currentPage }}</p> 
 
     <p>Total Page: {{ totalPage }}</p> 
 
     <p>Page Size: {{ pageSize }}</p> 
 
     <p>Table Height: {{tableHeight}}</p> 
 
    </div> 
 
    </div> 
 

 

 
    <script src="app.js"></script> 
 
</body> 
 

 
</html>

另见Plunker：http://plnkr.co/edit/np6y6rgN1ThnT0ZqyJeo?p=preview