检测UI格列V3.1.0汽车的宽度问题 [英] UI Grid v3.1.0 column auto width issue detected

查看：334 发布时间：2016/5/9 20:52:13 javascript jquery css angularjs angular-ui-grid

本文介绍了检测UI格列V3.1.0汽车的宽度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经发现了大约UI电网的许多问题autowidth问题。我设法重现其中之一，愿与您分享如何重现它的细节。

首先，我有默认的UI电网隐藏模式里面（你可以找到在这个帖子的末尾code段）。

重现步骤：

运行code段，preSS启动演示模式; （没有问题）;

关闭模式;

调整浏览器窗口。这里是。列宽被重置为一个错误值。

\r
\r
VAR应用= angular.module（'应用'，['ui.grid ]）;\r \r app.controller（'MainCtrl'，['$范围，$ HTTP，uiGridConstants'，函数（$范围，$ HTTP，uiGridConstants）{\r $ scope.gridOptions1 = {\r enableSorting：真实，\r columnDefs：\r {字段：名称}，\r {场：社会性别}，\r {场：'公司'，enableSorting：假}\r ]\r onRegisterApi：功能（gridApi）{\r $ scope.grid1Api = gridApi;\r }\r };\r \r \r \r $ scope.gridOptions1.data = [\r {名：1，性别：2，公司：3}，\r {名：1，性别：2，公司：3}，\r {名：1，性别：2，公司：3}，\r {名：1，性别：2，公司：3}，\r {名：1，性别：2，公司：3}];\r }]）;
\r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r \r ＆LT;链接HREF =https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css的rel =stylesheet属性/＆GT;\r ＆LT;链接HREF =https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.css的rel =stylesheet属性/＆GT;\r \r ＆所述; SCRIPT SRC =https://rawgit.com/HubSpot/tether/master/dist/js/tether.js＆GT;＆下; /脚本＆GT;\r ＆所述; SCRIPT SRC =https://rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js＆GT;＆下; /脚本＆GT;\r \r ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js＆GT;＆下; /脚本＆GT;\r \r ＆所述; SCRIPT SRC =https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js＆GT;＆下; /脚本＆GT;\r \r \r \r \r ＆LT;！ - 按键触发模式 - ＆GT;\r ＆LT;按钮式=按钮级=BTN BTN-主要BTN-LG数据切换=莫代尔数据目标=＃myModal＆GT;\r 启动演示模式\r ＆LT; /按钮＆GT;\r \r ＆LT;！ - 模态 - ＆GT;\r ＆LT; DIV CLASS =模式变脸ID =myModal的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真＆GT;\r ＆LT; DIV CLASS =模式，对话框的角色=文件＆GT;\r ＆LT; DIV CLASS =模式内容＆GT;\r ＆LT; DIV CLASS =模头＆GT;\r ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA标签=关闭＆GT;\r ＆LT;跨度ARIA隐藏=真＆GT;＆安培;倍;＆LT; / SPAN＆GT;\r ＆LT; /按钮＆GT;\r ＆LT; H4类=模式标题ID =myModalLabel＆GT;模态标题＆LT; / H4＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =模体NG-应用=应用程序＆GT;\r ＆LT; DIV NG控制器=MainCtrl＆GT;\r ＆LT; DIV ID =GRID1UI格=gridOptions1级=网格＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; DIV CLASS =模式躯＆GT;\r ＆LT;按钮式=按钮级=BTN BTN-二级数据解雇=模式＆GT;关闭＆LT; /按钮＆GT;\r ＆LT;按钮式=按钮级=BTN BTN-小学＆GT;保存更改LT; /按钮＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; / DIV＆GT;\r ＆LT; / DIV＆GT;
\r
\r
\r

解决方案

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

其实，有两个错误在这里。

UI格设置为0页时，语气是隐藏的调整;

UI格设置为0在页面加载。

第一个是容易察觉，如果你使用的UI电网uncom pressed版本修复：

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

使用jQuery一个简单的解决方法将是第一种情况如下：
  //调整窗口上的电网调整事件
功能gridResize（$事件）{
    grid.gridWidth = $ scope.gridWidth = gridUtil.elementWidth（$榆树）;
    grid.gridHeight = $ scope.gridHeight = gridUtil.elementHeight（$榆树）;
    的console.log（grid.gridWidth）;
    的console.log（grid.gridHeight）;
    如果（！$（$榆）。是（：隐藏）及和放大器; grid.gridWidth大于0）{// if语句前加上这种
        grid.refreshCanvas（真）; //这是UI格code
    }
}
 
第二种情况并非如此简单修复。因为我们需要得到Grid容器的宽度（在这种情况下的模态是容器）。
容器可能是一个隐藏的元素中（这意味着的jQuery（gridContainer）.WIDTH（）将返回零）。
这是我碰到 jQuery.actual 怎么来的插件（的 github上或的演示）。我会用它给你显示这种特定情况下的解决方案：
  //初始化指令
功能的init（）{
    如果（$（$榆）。是（：隐藏））{//添加
        grid.gridWidth = $ scope.gridWidth = $（$榆）.parent（）实际（'宽'）。 //添加
    }  //添加
    其他{//添加
        grid.gridWidth = $ scope.gridWidth = gridUtil.elementWidth（$榆树）; //这是UI格code
    }  //添加
}
 
至于结果，我们将得到一个UI电网与适当的自动宽度功能。
最后，我们不需要 $间隔解决方法从的教程这种方法。
I have found many questions about UI Grid autowidth issue. I managed to reproduce one of them and would like to share with you the details on how to reproduce it.

First, I have the default UI Grid inside of a hidden modal (you can find the code snippet at the end of this post).

Steps to reproduce:
Run the code snippet, press "Launch demo modal"; (there is no issues);

Close the modal;
Resize browser window. here it is. Column width is reset to a wrong value.
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 type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>


<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>
解决方案
Also I would like to share with you an approach of fixing it.

Actually, there are two bugs here.

UI Grid is set to 0 on page resize when modal is hidden;

UI Grid is set to 0 on page load.

The first one is easy to detect and fix if you use uncompressed version of UI Grid:

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

A simple workaround with jQuery will be as follows for the first case:
// 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
    }
}
The second case is not so simple to fix. Because we need to get the width of Grid container ( in this case modal is the container ).

Container might be inside of a hidden element ( that means jQuery(gridContainer).width() will return zero ).

That is how I came across jQuery.actual plugin (github or demo). I will use it to show you a solution for this specific case:
// 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
}
As result we will get a UI Grid with proper auto width feature. Finally, we do not need $Interval workaround from the tutorial with this approach.

这篇关于检测UI格列V3.1.0汽车的宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

检测UI格列V3.1.0汽车的宽度问题 [英] UI Grid v3.1.0 column auto width issue detected

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

检测UI格列V3.1.0汽车的宽度问题 [英] UI Grid v3.1.0 column auto width issue detected

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭