Angular ui-grid 动态计算网格高度 [英] Angular ui-grid dynamically calculate height of the grid

问题描述

我正在使用: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 加宽，但内容本身加宽到仅 340 像素左右.剩下的空间是空白的，所以我看到的不是 25 行而是 8 行.我必须向下滚动，而网格中有整个 400 像素的空闲空间.ui-grid-viewport 和 ui-grid-canvas 都没有使用这个空间...

为什么 ui-grid-viewport 不能使用那个空间?

解决方案

我使用 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,//设置行高，这是默认大小...};...$scope.getTableHeight = function() {var rowHeight = 30;//你的行高var headerHeight = 30;//你的标题高度返回 {高度:($scope.gridData.data.length * rowHeight + headerHeight) + "px"};};...

I am using : 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>

When I hard code the value, as shown above, the grid spreads out and everything works as expected.

However, if I do the following...

$scope.gridStyle = 'height:'+numRows*rowHeight+'px' //(765px);
<div ui-grid="gridOptions" style="{{gridStyle}}"></div>

The height is printed in the div and div widens but the content itself widens to only around 340px. The space that is left is blank, so instead of 25 rows I see only 8. I have to scroll down, while there is a whole 400px free in the grid. The ui-grid-viewport and ui-grid-canvas are both not using this space...

Why can't the ui-grid-viewport use that space?

解决方案

I use ui-grid - v3.0.0-rc.20 because a scrolling issue is fixed when you go full height of container. Use the ui.grid.autoResize module will dynamically auto resize the grid to fit your data. To calculate the height of your grid use the function below. The ui-if is optional to wait until your data is set before rendering.

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>

这篇关于Angular ui-grid 动态计算网格高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！