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

前端之家收集整理的这篇文章主要介绍了angularjs – 角度ui网格动态计算网格的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用: 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不能使用那个空间?

我使用ui-grid – v3.0.0-rc.20因为一个 scrolling issue is fixed当你走完全高度的容器。使用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>

猜你在找的Angularjs相关文章