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

问题描述

我使用：<一href=\"https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18\">https://github.com/angular-ui/ui-grid.info/tree/gh-pages/release/3.0.0-RC.18

 ＆LT;格UI格=gridOptions的风格=高度：765px＆GT;＆LT; / DIV＆GT;
 

当我辛苦code值，如上图所示，网格US $ p $垫出来，一切正常。

但是，如果我做了以下...

  $ scope.gridStyle ='高度：'+其行*的rowHeight +'像素'//（765px）;
＆LT;格UI格=gridOptions的风格={{gridStyle}}＆GT;＆LT; / DIV＆GT;
 

的高度印在div和DIV扩大，但本身扩大到大约只有340px内容。被留下的空间是空白的，所以不是25行我看到的只有8。我必须向下滚动，同时有一个整体400像素免费在网格中。 ui的并网视和UI格帆布都没有使用这个空间...

为什么不能在UI并网视使用空间？

解决方案

我用 UI网 - V3.0.0-rc.20 因为的scrolling问题已修复。使用 ui.grid.autoResize 模块将动态自动调整电网，以适应您的数据。要计算网格的高度使用下面的功能。在 UI-IF 是可选的等待，直到你的数据被渲染之前设置的。

\r

\r

<$c$c>angular.module('app',['ui.grid','ui.grid.autoResize']).controller('AppController', ['uiGridConstants'，函数（uiGridConstants）{\r
    ...\r
    \r
    $ scope.gridData = {\r
      的rowHeight：30，//设置行高度，这是默认大小\r
      ...\r
    };\r
  \r
    ...\r
\r
    $ scope.getTableHeight =功能（）{\r
       VAR的rowHeight = 30; //你的行高\r
       VAR headerHeight = 30; //你的头高度\r
       返回{\r
          高度：（$ scope.gridData.data.length *的rowHeight + headerHeight）+PX\r
       };\r
    };\r
      \r
    ...

\r

＆LT;格UI-IF =gridData.data.length大于0身份证=GRID1UI格=的GridData级=网格UI并网自动调整大小NG风格=getTableHeight（）＆GT;＆LT; / DIV＆GT;

\r

\r

\r

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>

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