Angularjs 角度ui网格动态计算网格的高度

我正在使用：

当我硬编码该值时，如上图所示，网格展开，一切都按预期工作

但是，如果我做以下事情

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

$scope.gridStyle='height:'+numRows*行高+'px'//（765px）；

高度在div中打印，div加宽，但内容本身仅加宽到340px左右。剩下的空间是空白的，所以我看到的不是25行，而是8行。我必须向下滚动，而网格中有一个完整的400px空闲。ui网格视口和ui网格画布均未使用此空间

---

为什么ui网格视口不能使用该空间？

我使用

ui网格-v3.0.0-rc.20

，因为当您到达容器的整个高度时，会出现一个网格。使用

ui.grid.autoResize

模块将动态自动调整网格大小以适应您的数据。要计算网格的高度，请使用下面的函数。

ui if

是可选的，可以在渲染之前等待数据设置完成

angular.module（'app'，['ui.grid'，'ui.grid.autoResize']）.controller（'AppController'，['uiGridConstants'，函数（uiGridConstants）{
...
$scope.gridData={
行高：30，//设置行高，这是默认大小
...
};
...
$scope.getTableHeight=函数（）{
var rowHeight=30；//您的行高
var headerHeight=30；//您的收割台高度
返回{
高度：（$scope.gridData.data.length*行高+人头高）+“px”
};
};
…

---

我喜欢Tony方法。它很有效，但我决定以不同的方式实现。我的评论如下：

1） 我做了一些测试，在使用ng样式时，Angular会多次计算ng样式的内容，我的意思是getTableHeight（）函数。我在getTableHeight（）函数中设置了一个断点来分析这一点

顺便说一下，ui if已被删除。现在您有了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>

---

更新：

HTML是被要求的，所以我把它贴在下面

<div ui-grid="gridOptions" class="my-grid"></div>

---

这个解决方案最好的部分是，我们不需要调整大小事件处理来监控网格大小的变化。它只起作用。

tony的方法对我来说确实有效，但在执行console.log时，函数getTableHeight被调用的次数太多（排序、菜单单击…）

我对其进行了修改，以便仅在添加/删除行时才重新计算高度。注意：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

---

一种更简单的方法是使用
css
并动态设置
minRowsToShow
和
虚拟化阈值

在样式表中：

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

在代码中，每次在
gridOptions
中更改
数据时调用以下函数
maxRowToShow
是您预定义的值，对于我的用例，我将其设置为25

ES5：

按照@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";
}


getTableHeight（）{
var offsetValue=365；
返回“高度：”+parseInt（window.innerHeight-offsetValue）+“px！重要”；
}

网格相对于窗口高度也具有动态高度。
.ui-grid、.ui-grid-viewport、.ui-grid-contents-wrapper、.ui-grid-canvas{
高度：自动！重要；
}
我在游戏中迟到了，但我找到了一个很好的解决方案。我创建了一个自定义属性指令，您需要做的就是传入gridApi，它将自动计算高度。它还订阅分页更改事件，因此如果用户更改页面大小，它将调整大小

类UIGridAutoResize实现了ng.IDirective{
链接：（作用域：ng.IScope，元素：ng.IAugmentedJQuery，属性：ng.IAttributes）=>void；
作用域：{gridApi:=“}；
restrict=“A”；
private-previousValue：字符串；
private-isValid:boolean=true；
私人手表：任何；
构造函数（$timeout:ng.ITimeoutService）{
UIGridAutoResize.prototype.link=（作用域：ng.IScope，元素：ng.IAugmentedJQuery，属性：ng.IAttributes）=>{
const gridOptions=scope.$eval（attrs.uiGrid）如有；
const gridApi=范围$eval（attrs.gridResize）如有；
gridApi.core.on.rowsRendered（范围，（）=>{
$timeout（（）=>{
autoSizeGrid（元素、属性、gridOptions、gridApi、false）；
}, 100);
});
gridApi.core.on.filterChanged（作用域，（）=>{
autoSizeGrid（元素、属性、gridOptions、gridApi、false）；
});
如果（attrs.uiGridPagination==“”）{
gridApi.pagination.on.paginationChanged（null，（）=>{
this.autoSizeGrid（元素、属性、gridOptions、gridApi、true）；
});
}
角度。元素（窗口）。调整大小（（）=>{
$timeout（（）=>{
autoSizeGrid（元素、属性、gridOptions、gridApi、false）；
}, 100);
});
};
}
静态工厂（）：ng.IDirectiveFactory{
const指令=（$timeout:ng.ITimeoutService）=>{
返回新的UIGridAutoResize（$timeout）；
};
指令[“$inject”]=[“$timeout”]；
返回指令；
}
私有autoSizeGrid（元素：ng.IAugmentedJQuery、属性：ng.IAttributes、gridOptions:any、gridApi:any、isPaginationChanged:boolean）{
gridApi.core.HandleIndowerSize（）；
//清除空网格消息
angular.element（element.parent（））.find（“#emptyGridMessage”）.remove（）；
元素.find（“.ui网格视口”）.css（“显示”、“显示”）；
如果（attrs.hidePageSize==“”）{
元素.find（“.ui网格分页器行计数选择器”）.css（“显示”、“无”）；
}
让rowCount=gridApi.core.getVisibleRows（）.length；
const headerElements=element.find（“.ui网格”）
$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());
});

<div id="grid1" ui-grid="gridData" class="grid" ui-grid-auto-resize"></div>

.ui-grid, .ui-grid-viewport {
    height: auto !important;
}

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 ;
}

<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";
}