15

angular 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-hide によって ng-grid の可視性が不可視から可視に変更されると、グリッド幅が再計算されない

于 2014-10-03T12:58:15.903 に答える
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 に答える
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

私の場合、DOM ツリーを変更したすべてのスクリプトの後に ng-grid ライブラリ スクリプトを移動しました。言い換えれば：
問題あり：

<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 に答える