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

Question

我发现了很多关于 UI Grid 自动宽度问题的问题。我设法复制了其中一个，并想与您分享有关如何复制它的详细信息。

首先，我在一个隐藏的模式中有默认的 UI 网格(您可以在本文末尾找到代码片段)。

重现步骤:

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

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   
   <link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/>
   <link href="https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.css" rel="stylesheet"/>
   
   <script src="https://rawgit.com/HubSpot/tether/master/dist/js/tether.js"></script>
   <script src="https://rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
   
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
   
   <script src="https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script>
   
   
   
   
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
     Launch demo modal
   </button>
   
   <!-- Modal -->
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
         </div>
         <div class="modal-body" ng-app="app">
           <div ng-controller="MainCtrl">
           <div id="grid1" ui-grid="gridOptions1" class="grid"></div></div>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div>
     </div>
   </div>

Answer 1

另外我想和大家分享一个修复它的方法。

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

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

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

There reason of both issues is the same. The width of hidden element is zero.

对于第一种情况，使用 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
}

因此，我们将获得具有适当自动宽度功能的 UI 网格。最后，我们不需要 tutorial 中的 $Interval 解决方法用这种方法。