检测到UI Grid v3.1.0列自动宽度问题

我发现了很多关于UI Grid自动宽度问题的问题。 我设法重现其中一个，并希望与您分享如何重现它的细节。

首先，我在隐藏模态中有默认的UI Grid（你可以在这篇文章的末尾找到代码片段）。

重现步骤：

1. 运行代码段，按“启动演示模式”; （没有问题）;

2. 关闭模态;

3. 调整浏览器窗口大小。 这里是。 列宽重置为错误值。

   var app = angular.module('app', ['ui.grid']); app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { $scope.gridOptions1 = { enableSorting: true, columnDefs: [ { field: 'name' }, { field: 'gender' }, { field: 'company', enableSorting: false } ], onRegisterApi: function( gridApi ) { $scope.grid1Api = gridApi; } }; $scope.gridOptions1.data = [ { name: 1, gender: 2, company: 3 }, { name: 1, gender: 2, company: 3 }, { name: 1, gender: 2, company: 3 }, { name: 1, gender: 2, company: 3 }, { name: 1, gender: 2, company: 3 }]; }]); 

              Launch demo modal   
    
    
    
     ×  
   Modal title
    
    
    
    
    
    
    Close Save changes 
    
    
     

Answer 1

另外，我想与您分享修复它的方法。

实际上，这里有两个错误。

1. 隐藏模态时，UI网格在页面大小调整时设置为0;
2. UI网格在页面加载时设置为0。

如果您使用未压缩版本的UI Grid，第一个很容易检测和修复：

这两个问题的原因是一样的。 隐藏元素的宽度为零。

对于第一种情况，jQuery的简单解决方法如下：

 // Resize the grid on window resize events function gridResize($event) { grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); console.log(grid.gridWidth); console.log(grid.gridHeight); if(!$($elm).is(':hidden') && grid.gridWidth > 0) { //add such if statement before grid.refreshCanvas(true); //this is UI Grid code } } 

第二种情况并非如此简单。 因为我们需要获取Grid容器的宽度（在这种情况下，modal是容器）。

容器可能位于隐藏元素内（这意味着jQuery(gridContainer).width()将返回零）。

这就是我遇到jQuery.actual插件（ github或demo ）的方式。 我将使用它向您展示针对此特定案例的解决方案：

 // Initialize the directive function init() { if($($elm).is(':hidden')) { //added grid.gridWidth = $scope.gridWidth = $($elm).parent().actual('width'); //added } //added else { //added grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); //this is UI Grid code } //added } 

因此，我们将获得具有适当自动宽度function的UI网格。 最后，我们不需要使用此方法的教程中的 $Interval解决方法。