12

我们想使用 Angular UI ng-grid，但似乎找不到一个选项来告诉网格内的视口不要将溢出设置为自动而不滚动。

我们想做的是根据网格中行数的大小使表格/网格高度动态变化。我们有一个固定的最大行数，所以几乎不用担心 DOM 中有太多行。

关于去哪里的任何建议？

4

4 回答 4

10

将此添加到您的 CSS 将解决您的问题：

.ngViewport{
    height:auto !important;
}
.ngCanvas, .ngViewport, .ngRow, .ngFooterPanel, .ngTopPanel   {
   width: 100% !important;
}
.ngRow {
   border-bottom:none !important;
}
于 2014-05-20T08:56:54.473 回答
8

我最近遇到了同样的问题，并在https://groups.google.com/forum/#!topic/angular/KiBXP3eKCDY找到了解决方案

您想ng-grid在获得数据后进行初始化。

以下解决方案需要使用 angular-ui：

<div ui-if="dataForGrid.length>0" ng-grid="gridOptions" ng-style="getTableStyle()"  />

$scope.getTableStyle= function() {
   var rowHeight=30;
   var headerHeight=45;
   return {
      height: ($scope.dataForGrid.length * rowHeight + headerHeight) + "px"
   };
};
于 2013-12-19T18:11:06.560 回答
6

在您的 CSS 中，您可以尝试覆盖包含行height的div，这样行就不会溢出容器：

.ngViewport {
  height: auto !important;
}

您还可以使用行背景颜色填充 ng-grid 为滚动条留下的空白（尽管不幸的是，最后一个单元格的数据不会扩展以填补空白）：

.ngCanvas {
   width: 100% !important;
}
.ngRow {
   width: 100% !important;
}

根据您的表格布局，您可能还需要更改一些其他样式，但这些是主要样式。还要注意不要为整个ngGrid.

于 2014-02-27T07:13:09.457 回答
5

是的，有一个插件可以提供这样的功能，它的ng-grid-flexible-height.js

您可以查看plunker的使用方式

于 2013-08-17T12:39:34.583 回答