15

带有角度 js 的 ng-grid 在页面加载时不会占用 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>

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

4

10 回答 10

5

这对我有用

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

将“gridOptions”替换为您使用的变量和宾果游戏！

于 2014-06-29T12:36:22.270 回答
5

尝试将 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

相关问题：当​​ ng-grid 通过 ng-hide 将可见性从不可见更改为可见时，不会重新计算网格宽度

于 2014-10-03T12:58:15.903 回答
4

使用Angular UI Bootstrap中的选项卡时我遇到了同样的问题。

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

触发此事件，ng-grid 将正确调整自身大小。

使用这样的东西：

function onTabSelect() {
  $('.grid-container').trigger('resize');
}
于 2014-01-17T11:40:44.900 回答
2

您可以使用网格 ngGridLayoutPlugin （在此处找到）并在控制器的 init 函数中调用它。

    var layoutPlugin = new ngGridLayoutPlugin();


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


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

    };
于 2014-01-10T16:22:02.783 回答
1

如果您在加载网格后有处理程序，那么您可以调用一个在调整窗口大小时实际重新渲染网格的方法。

gridApi.core.handleWindowResize()

每当您想手动调用调整大小事件时，这可能会对您有所帮助。

于 2017-01-27T05:35:35.263 回答
0

这种变化在 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);
于 2013-06-06T10:37:22.407 回答
0

就我而言，我在所有脚本之后移动了 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>
于 2014-01-10T05:08:38.190 回答
0

希望这可以节省其他人在这仍然是一个问题的情况下花费在解决方法上的时间。对我来说，我的最后一列宽度是“*”，并且截止不是问题，因此使用包装器 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;
}
于 2014-05-06T16:10:50.183 回答
0

你们都很复杂，这不是对源代码进行更改的最佳方法..

只需添加到 div

data-ng-show="myData.length"

其中 myData 是 Grid 数据源，确保数据加载异步或在加载数据方法上设置 $timeout。

我知道 ngGrid 有一个名为 的方法getPagedDataAsync，可以从 JQuery 文档中调用它，如下所示：

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

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

希望能帮助到你 ：）

问候

于 2014-05-29T13:16:35.177 回答
-1

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

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

setInterval(function() {
    domUtilityService.RebuildGrid($scope,grid);
}, 30);
于 2013-04-23T06:48:46.437 回答