UI-网格在页面加载时不会占用 100% 的宽度

Question

我正在使用 ui-grid 来显示 table 中的数据。当我加载页面并离开几秒钟然后单击选项卡（包含 ui-grid）时，ui-grid css 中断。当我加载页面并单击选项卡（包含 ui-网格）时，它不显示 ui-网格 100% 的 container.but 宽度。 ui-网格显示完美，我的意思是它的宽度是容器的 100%。我不知道什么是 problem.this 代码，我正在研究：

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>

注： ui-grid在AngularbootstrapTab[=14里面=]

这里是折叠网格的快照：

Answer 1

您是否在页面加载时使用动画 - 也许是选项卡或模式？如果是这样，那么通常的解决方法就是我们在模态教程中使用的方法：http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

问题是网格没有响应，它在渲染时获得了它的大小。如果您没有给出固定大小，它会从容器大小中获取。如果你的容器当时正在做动画，大小可能不是真实大小。

Answer 2

解决方法是添加宽度和行高对于行和单元格。正如我指出的那样，这是一种解决方法，我相信必须有其他方法可以做到这一点，但这是一个快速修复，至少应该让你得到你想要的东西:)

    $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}
                ]}

Answer 3

使用建议的轮询方法，该函数会在指定的等待时间后调用，因此每次宽度变化都是突然发生的。当用户快速更改 table 大小时，这会导致大量抖动。

更好的方法是绑定调整大小处理程序，以便在视口更改时调用调整大小函数

angular.element($window).bind('resize', () => {
        this.updateTableWidth();
    });

我的项目使用侧边栏，所以我考虑了侧边栏宽度或填充宽度（如果侧边栏打开与否），然后只需在我的 table 包装器上设置一个绑定到 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>

Answer 4

这对我来说就像一个魅力！

将 say ng-style="windowResize" 添加到 HTML 模板中的 ui 网格标记，并在 $scope.windowResize 上，在 onRegisterApi 函数中添加 width: 100%范围内。

所以，基本上 onRegisterApi() 是 ui-grid 的默认函数，它在实际绘制网格时触发，所以基本上我们有条件地向网格添加宽度 100% 并使其响应所有视口。

Answer 5

在间隔时间内使用$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);
    }

Answer 6

  $timeout(function () {
                $scope.gridApi.core.handleWindowResize();

            }, 500);
            $scope.gridApi.core.refresh();

这对我有用。

Answer 7

从您的 HTML div 标签中删除 ui-grid-resize-columns。

UI-网格在页面加载时不会占用 100% 的宽度

UI-Grid does not take 100% width on page load

javascript

angularjs

angular-ui-grid