角度ui网格动态计算网格的高度

Question

我正在使用:https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18

<div ui-grid="gridOptions" style="height:765px"></div>

当我对值进行硬编码时,如上所示,网格展开,一切都按预期工作.

但是,如果我做以下事情......

$scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px);
<div ui-grid="gridOptions" style="{{gridStyle}}"></div>

高度打印在div和div加宽,但内容本身扩大到只有340px左右.剩下的空间是空白的,所以不是25行我只看到8.我必须向下滚动,而网格中有400px的空闲.ui-grid-viewport和ui-grid-canvas都没有使用这个空间......

为什么ui-grid-viewport不能使用那个空间？

Answer 1

我使用ui-grid - v3.0.0-rc.20是因为当你走到容器的整个高度时,滚动问题就解决了.使用该ui.grid.autoResize模块将动态自动调整网格大小以适合您的数据.要计算网格的高度,请使用以下函数.该ui-if是可选的等待,直到您的数据被渲染之前设置.

angular.module('app',['ui.grid','ui.grid.autoResize']).controller('AppController', ['uiGridConstants', function(uiGridConstants) {
    ...
    
    $scope.gridData = {
      rowHeight: 30, // set row height, this is default size
      ...
    };
  
    ...

    $scope.getTableHeight = function() {
       var rowHeight = 30; // your row height
       var headerHeight = 30; // your header height
       return {
          height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px"
       };
    };
      
    ...

<div ui-if="gridData.data.length>0" id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize ng-style="getTableHeight()"></div>

Answer 2

更简单的方法是css结合使用动态设置minRowsToShow和virtualizationThreshold值.

在样式表中:

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

在代码中调用这个函数的每次你改变你的时间data在gridOptions.maxRowToShow是您预先定义的值,对于我的用例,我将其设置为25.

ES5:

setMinRowsToShow(){
    //if data length is smaller, we shrink. otherwise we can do pagination.
    $scope.gridOptions.minRowsToShow = Math.min($scope.gridOptions.data.length, $scope.maxRowToShow);
    $scope.gridOptions.virtualizationThreshold = $scope.gridOptions.minRowsToShow ;
}