- 首页
- 前端开发
- 检测到 UI Grid v3.1.0 列自动宽度问题
检测到 UI Grid v3.1.0 列自动宽度问题
[英] UI Grid v3.1.0 column auto width issue detected
本文介绍了检测到 UI Grid v3.1.0 列自动宽度问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发现了很多关于 UI Grid 自动宽度问题的问题.我成功地复制了其中之一，并想与您分享如何复制它的详细信息.
首先，我在一个隐藏的模态中使用了默认的 UI 网格(您可以在本文末尾找到代码片段).
重现步骤:
运行代码片段，按Launch demo modal"；(没有问题)；
关闭模态；
- 调整浏览器窗口的大小.这里是.列宽被重置为错误值.
var app = angular.module('app', ['ui.grid']);app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {$scope.gridOptions1 = {启用排序:真，列定义:[{字段:'姓名'}，{字段:'性别'}，{ 字段:'公司'，启用排序:false }],onRegisterApi:函数(gridApi){$scope.grid1Api = gridApi;}};$scope.gridOptions1.data = [{姓名:1，性别:2，公司:3}，{姓名:1，性别:2，公司:3}，{姓名:1，性别:2，公司:3}，{姓名:1，性别:2，公司:3}，{姓名:1，性别:2，公司: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">启动演示模式<!-- 模态--><div class="modalfade" 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">×</span><h4 class="modal-title" id="myModalLabel">模态标题</h4>
<div class="modal-body" ng-app="app"><div ng-controller="MainCtrl"><div id="grid1" ui-grid="gridOptions1" class="grid"></div></div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>
解决方案
另外，我想和你分享一个修复它的方法.
实际上，这里有两个错误.
- 当模态隐藏时，UI Grid 在页面调整大小时设置为 0；
- 页面加载时 UI 网格设置为 0.
如果您使用未压缩版本的 UI Grid，第一个很容易检测和修复:
<块引用>这两个问题的原因是一样的.隐藏元素的宽度为零.
对于第一种情况，jQuery 的简单解决方法如下:
//在窗口调整大小事件时调整网格大小函数 gridResize($event) {grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm);控制台日志(grid.gridWidth)；控制台日志(grid.gridHeight)；if(!$($elm).is(':hidden') && grid.gridWidth > 0) {//在前面添加这样的if语句grid.refreshCanvas(true);//这是UI网格代码}}
第二种情况不太容易解决.因为我们需要获取Grid容器的宽度(本例中modal就是容器)
Container 可能位于隐藏元素内(这意味着 jQuery(gridContainer).width() 将返回零).
这就是我遇到 jQuery.actual 插件(github 或 演示).我将使用它向您展示针对此特定情况的解决方案:
//初始化指令函数初始化(){if($($elm).is(':hidden')) {//添加grid.gridWidth = $scope.gridWidth = $($elm).parent().actual('width');//添加} //添加else {//添加grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm);//这是UI网格代码} //添加}
因此，我们将获得具有适当自动宽度功能的 UI 网格.最后，我们不需要 教程$Interval 解决方法a> 使用这种方法.
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 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">×</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 Grid v3.1.0 列自动宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
