Question

我发现了很多关于UI Grid自动调整问题的问题。我设法重现了其中一个，并希望与您分享有关如何重现它的详细信息。

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

重现的步骤：

运行代码段，按＆＃34;启动演示模式＆＃34 ;; （没有问题）;
关闭模式;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

当隐藏模态时，页面调整大小时UI网格设置为0;
页面加载时，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
}

结果我们将获得具有适当自动宽度功能的UI网格。最后，我们不需要使用此方法tutorial进行$Interval解决方法。

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

1 个答案: