Question

带有角度js的ng网格在页面加载时不会占用100％的宽度。这是我的代码：

    <tabs ng-cloak>
        <pane title="Test Plan">
            <tabs>
                <pane title="Include Tests">
                    <div ng-controller="includedTestPlanGridCntrl">
                        <div class="gridStyle" ng-grid="gridOptions"></div>
                    </div>
                </pane>
                <pane title="Excluded Tests">
                    <div ng-controller="excludedTestPlanGridCntrl">
                        <div class="gridStyle1" ng-grid="gridOptions"></div>
                    </div>
                </pane>
            </tabs>
        </pane>
        <pane title="Advanced Planning">
            Some text here
        </pane>
    </tabs>

如果我调整大小，网格会正确显示。

Answer 1

这对我有用

$scope.gridOptions = {
        data: 'gridData',
        init:function(grid,$scope) {
            setTimeout(function() {
                $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
                    $scope.gridOptions.$gridScope,
                    $scope.gridOptions.ngGrid
                );
            },1000);
        }
    };

替换＆＃34; gridOptions＆＃34;你用的变量和宾果游戏！

Answer 2

尝试设置ng-if仅在有数据显示时包含网格:( ng-hide对我不起作用）

<div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div>

来源： https://github.com/angular-ui/ng-grid/issues/855

相关问题：When ng-grid change visibility from invisible to visible by ng-hide, grid width not being re-calculated

Answer 3

使用Angular UI Bootstrap中的标签我遇到了同样的问题。

最简单的解决方法是在ng-grid的父元素上触发resize事件最好选择包含ng-grid的选项卡。

ng-grid将自动调整此事件的大小。

使用类似的东西：

function onTabSelect() {
  $('.grid-container').trigger('resize');
}

Answer 4

您可以使用网格ngGridLayoutPlugin (found here)并在控制器初始化函数中调用它。

    var layoutPlugin = new ngGridLayoutPlugin();


    $scope.init = function() {
        $scope.gridOptions = {
            plugins: [layoutPlugin],
        };


        window.setTimeout(function(){
            layoutPlugin.updateGridLayout();
        }, 100);

    };

Answer 5

如果在加载网格后有处理程序，则可以在调整窗口大小时调用实际重新呈现网格的方法。

gridApi.core.handleWindowResize()

只要您想手动调用resize事件，这可能会有所帮助。

Answer 6

就CPU负载而言，这种变化会更好。

第2904行

https://github.com/angular-ui/ng-grid/blob/a0d693e413e993145bff274375f1102770585e59/ng-grid-2.0.6.debug.js

由此：

    // we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    domUtilityService.RebuildGrid($scope, grid);
}, true);

对此：

    // we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    setTimeout(function() {domUtilityService.RebuildGrid($scope,grid);}, 1);
}, true);

Answer 7

在我的情况下，我在所有脚本之后移动了ng-grid库脚本，这改变了DOM树。换句话说：
有问题：

<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script src="jquery.mmenu.min.all.js"></script>

解决问题：

<script src="jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>

Answer 8

希望这可以节省其他人在我仍然遇到问题的情况下花在处理上的时间。对我来说，我的最后一列宽度为＆＃34; *＆＃34;，并且cutoff不是问题，因此使用包装器div工作。我对javascript超时解决方案也不感兴趣。

HTML：

<div class="gridWidthWrapper">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

控制器：

$scope.gridOptions = {
    data: 'dataList',
    columnDefs: [{field: 'type', displayName: 'Type', width: 120},
      {field: 'description', displayName: 'Description', width: '*'}]
  };

CSS：

.gridWidthWrapper {
    width: 100%;
    overflow: hidden;
}

.gridStyle {
/* width: 100%;  --- 100% not sizing on load - using gridWidthWrapper class to obtain 100% */
  width: 2000px;
  height: 150px;
}

Answer 9

你们都很复杂，这不是改变源代码的最好方法。

只需添加到div

即可

data-ng-show="myData.length"

如果myData是网格数据源，请确保数据加载异步或在加载数据方法上设置$ timeout。

我知道ngGrid有一个名为getPagedDataAsync的方法，从JQuery文档中调用它，有些像这样：

$(function(){
   getPagedDataAsync(...)
});

如果您不是分页数据，只需从JQuery文档中调用自定义数据加载方法。

希望有所帮助：）

此致

Answer 10

我已经为此制定了解决方案。

只需在ng.EventProvider中的ng-grid.js中添加以下行。

setInterval(function() {
    domUtilityService.RebuildGrid($scope,grid);
}, 30);

ng-grid在页面加载时不会占用100％的宽度，但在调整大小时显示正常

10 个答案: