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

发布时间：2020-12-17 08:38:42 所属栏目：安全来源：网络整理

导读：我使用： 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:'+n

我使用： 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!