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