角度ui-grid动态计算网格高度

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左右。剩下的空间是空白的，所以我只看到8行，而不是25行。我必须向下滚动，而网格中有整个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>