有angular度的网格dynamic计算网格的高度
我正在使用： 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因为滚动问题是在你boost容器的时候解决的。 使用ui.grid.autoResize模块将dynamic自动调整网格大小以适合您的数据。 要计算网格的高度，请使用下面的函数。 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>
更简单的方法是使用css结合dynamic设置minRowsToShow和virtualizationThreshold值。
在样式表中：
.ui-grid, .ui-grid-viewport { height: auto !important; }
在代码中，每次更改gridOptions的data时，请调用以下函数。 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 ; }
更新 ：
HTML被要求，所以我已经粘贴在下面。
<div ui-grid="gridOptions" class="my-grid"></div>
原文 ：
我们能够通过使用响应式CSS（ @media ）来充分解决这个问题，这个CSS根据屏幕的不动产来设置高度和宽度。 类似的东西（显然你可以根据你的需要添加更多）：
@media (min-width: 1024px) { .my-grid { width: 772px; } } @media (min-width: 1280px) { .my-grid { width: 972px; } } @media (min-height: 768px) { .my-grid { height: 480px; } } @media (min-height: 900px) { .my-grid { height: 615px; } }
关于这个解决scheme最好的部分是我们不需要resize事件处理来监视网格大小的变化。 它只是工作。
我喜欢托尼的方法。 它工作，但我决定以不同的方式实施。 在这里我的评论：
1）我做了一些testing，当使用ng样式时，Angular评估ng样式的内容，我的意思是getTableHeight（）函数不止一次。 我把一个断点放入getTableHeight（）函数来分析这个。
顺便说一句，如果被删除了。 现在你有ng-if内置。
2）我更喜欢写这样的服务：
angular.module('angularStart.services').factory('uiGridService', function ($http, $rootScope) { var factory = {}; factory.getGridHeight = function(gridOptions) { var length = gridOptions.data.length; var rowHeight = 30; // your row height var headerHeight = 40; // your header height var filterHeight = 40; // your filter height return length * rowHeight + headerHeight + filterHeight + "px"; } factory.removeUnit = function(value, unit) { return value.replace(unit, ''); } return factory;
}）;
然后在控制器中写入以下内容：
angular.module('app',['ui.grid']).controller('AppController', ['uiGridConstants', function(uiGridConstants) { ... // Execute this when you have $scope.gridData loaded... $scope.gridHeight = uiGridService.getGridHeight($scope.gridData);
在HTML文件中：
<div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize style="height: {{gridHeight}}"></div>
当angular应用样式时，只需要查看$ scope.gridHeightvariables而不是评估一个完整的函数。
3）如果要dynamic计算可扩展网格的高度，则更为复杂。 在这种情况下，可以设置expandableRowHeight属性。 这将修复每个子网格的保留高度。
$scope.gridData = { enableSorting: true, multiSelect: false, enableRowSelection: true, showFooter: false, enableFiltering: true, enableSelectAll: false, enableRowHeaderSelection: false, enableGridMenu: true, noUnselect: true, expandableRowTemplate: 'subGrid.html', expandableRowHeight: 380, // 10 rows * 30px + 40px (header) + 40px (filters) onRegisterApi: function(gridApi) { gridApi.expandable.on.rowExpandedStateChanged($scope, function(row){ var height = parseInt(uiGridService.removeUnit($scope.jdeNewUserConflictsGridHeight,'px')); var changedRowHeight = parseInt(uiGridService.getGridHeight(row.entity.subGridNewUserConflictsGrid, true)); if (row.isExpanded) { height += changedRowHeight; } else { height -= changedRowHeight; } $scope.jdeNewUserConflictsGridHeight = height + 'px'; }); }, columnDefs : [ { field: 'GridField1', name: 'GridField1', enableFiltering: true } ] }
托尼的方法确实为我工作，但是当做一个console.log，函数getTableHeight调用太多时间（sorting，菜单单击…）
我修改它，所以只有当我添加/删除行重新计算高度。 注意：tableData是行数组
$scope.getTableHeight = function() { var rowHeight = 30; // your row height var headerHeight = 30; // your header height return { height: ($scope.gridData.data.length * rowHeight + headerHeight) + "px" }; }; $scope.$watchCollection('tableData', function (newValue, oldValue) { angular.element(element[0].querySelector('.grid')).css($scope.getTableHeight()); });
HTML
<div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize"></div>
遵循@ tony的方法，将getTableHeight（）函数改为
<div id="grid1" ui-grid="$ctrl.gridOptions" class="grid" ui-grid-auto-resize style="{{$ctrl.getTableHeight()}}"></div> getTableHeight() { var offsetValue = 365; return "height: " + parseInt(window.innerHeight - offsetValue ) + "px!important"; }
网格也将具有关于窗口高度的dynamic高度。
.ui-grid，.ui-grid-viewport，.ui-grid-contents-wrapper，.ui-grid-canvas {height：auto！important; }
