javascript UI-Grid 在页面加载时不会占用 100% 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29763842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
UI-Grid does not take 100% width on page load
提问by Mukund Kumar
I am using ui-grid to showing data in table. when i load the page and leave for few second and then click on the tab (which containing ui-grid), the ui-grid css break. it does not show width of ui-grid 100% of container.but when i load page and just click on tab (containg ui-grid). ui-grid is showing perfect, i mean width of that is 100% of container. I don't know what is the problem.this is the code, i am working on :
我正在使用 ui-grid 在表格中显示数据。当我加载页面并离开几秒钟然后单击选项卡（包含 ui-grid）时，ui-grid css 中断。它不显示容器的 100% ui-grid 的宽度。但是当我加载页面并单击选项卡时（包含 ui-grid）。ui-grid 显示完美，我的意思是它的宽度是容器的 100%。我不知道是什么问题。这是代码，我正在处理：
Js:
JS：
$scope.gridOptions= {
enableFiltering: true,
enableGridMenu : true,
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 50,
// rowHeight: 35,
// infiniteScrollRowsFromEnd: 50,
// infiniteScrollUp: true,
infiniteScrollDown: true,
columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:'10%'},
{ displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}},
{ displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} }
]
}
Html:
网址：
<div class="grid m-b-20" ui-grid="gridOptions" ui-grid-move-columns ui-grid-edit ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-grouping ui-grid-infinite-scroll>
</div>
Note:ui-grid is inside Angular bootstrap Tab
注意：ui-grid 在 Angular bootstrap Tab 里面
and here is the snapshot of collapse grid :
这是折叠网格的快照：
采纳答案by PaulL
Are you using an animation on page load - perhaps a tab or a modal? If so, then the usual workaround is the one we use in the modal tutorial: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal
您是否在页面加载时使用动画 - 可能是选项卡或模式？如果是这样，那么通常的解决方法是我们在模态教程中使用的方法：http: //ui-grid.info/docs/#/tutorial/110_grid_in_modal
The problem is that the grid isn't responsive, it gets it's size on render. If you haven't given a fixed size it gets it from the container size. If your container is being animated at the time, the size may not be the real size.
问题是网格没有响应，它在渲染时得到它的大小。如果您没有给出固定大小，它会从容器大小中获取。如果您的容器当时正在动画，则大小可能不是真实大小。
回答by KARTHIKEYAN.A
use $scope.gridApi.core.handleWindowResize();this method in interval time to solve this problem
使用$scope.gridApi.core.handleWindowResize(); 这个方法在间隔时间解决这个问题
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.mySelectedRows = $scope.gridApi.selection.getSelectedRows();
//$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter);
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
$scope.selectedUser = row.entity.dev_id;
console.log(row);
console.log(row.grid.selection.lastSelectedRow.isSelected);
/*$http.get('./api/ioni_developers/' + $scope.selectedUser).then(function(response) {
if(row.grid.selection.lastSelectedRow.isSelected === true){
$scope.data.dev_id = response.data.dev_id;
$scope.data.dev_name = response.data.dev_name;
$scope.data.dev_email = response.data.dev_email;
$scope.selected = false;
}else{
$scope.data.dev_id = '';
$scope.data.dev_name = '';
$scope.data.dev_email = '';
$scope.selected = true;
}
})*/
});
$scope.selected = true;
$interval( function() {
$scope.gridApi.core.handleWindowResize();
}, 500, 10);
}
回答by SReddy
$timeout(function () {
$scope.gridApi.core.handleWindowResize();
}, 500);
$scope.gridApi.core.refresh();
This did the job for me.
这为我完成了工作。
回答by Ravindra Bakkamanthala
Remove ui-grid-resize-columnsfrom your HTML divtags.
ui-grid-resize-columns从您的 HTMLdiv标签中删除。
回答by grepit
The workaround for this is adding the width and rowHeight for row and cell. As I indicated this is a workaround and I am sure there must other ways of doing this but this a quick fix and should get you what you at least going :)
解决方法是为行和单元格添加宽度和行高度。正如我所指出的，这是一种解决方法，我相信必须有其他方法可以做到这一点，但这是一个快速解决方案，至少应该能让您达到目的:)
$scope.gridOptions={
//set the row height to a fixed length
rowHeight: 80,
enableFiltering: true,
enableGridMenu : true,
enableRowSelection: true,
enableSelectAll: true,
selectionRowHeaderWidth: 50,
infiniteScrollDown: true,
columnDefs : [
{ displayName:"Attribute",field: 'attributeId',filter: {placeholder: 'Search Attribute'},width:100},
{ displayName:"Section",field: 'sectionRef.attributeSectionId' ,filter: {placeholder: 'Search Section'}, width:100},
{ displayName:"Type",field: 'types',filter: { placeholder: 'Search Types'} , width:100}
]}
回答by AnthonyI
With the suggested polling approach, the function is called after a specified wait, so each width change occurs suddenly. This results in substantial judder when the user quickly changes the table size.
使用建议的轮询方法，在指定的等待后调用该函数，因此每次宽度更改都会突然发生。当用户快速更改表格大小时，这会导致严重的抖动。
A much better approach is to bind a resize handler to call a resize function when the viewport changes
更好的方法是绑定调整大小处理程序以在视口更改时调用调整大小函数
angular.element($window).bind('resize', () => {
this.updateTableWidth();
});
My project uses a sidebar, so I account for the sidebar width or padding width (if sidebar is open or not), then just set a variable bound to an ng-style on my table wrapper
我的项目使用侧边栏，所以我考虑了侧边栏宽度或填充宽度（如果侧边栏打开与否），然后只需在我的表格包装器上设置一个绑定到 ng 样式的变量
private updateTableWidth() {
let width = this.$window.innerWidth;
let modifier = (width >= 1280) ? this.sidebarWidth : this.paddingWidth;
this.tableWidth = (width - modifier) + 'px';
}
<div ng-style="{'width': ctrl.tableWidth}">
<div ui-grid></div> <!-- Whatever your grid is -->
</div>
回答by siddhi
This is what worked for me like a charm!
这就是对我有用的魅力！
Add say ng-style="windowResize"to the ui grid markup in HTML template, and on $scope.windowResize, add width: 100%within onRegisterApifunction within the scope.
ng-style="windowResize"在 HTML 模板中的 ui 网格标记中添加 say ，然后在作用域内的 function 中$scope.windowResize添加。width: 100%onRegisterApi
So, basically onRegisterApi()is the default function from ui-grid that triggers when grid is actually drawn, and so basically we are conditionally adding width 100% to grid and making it responsive for all viewports.
所以，基本上onRegisterApi()是 ui-grid 的默认函数，它在实际绘制网格时触发，所以基本上我们有条件地将宽度 100% 添加到网格并使其响应所有视口。
