Ng-grid не занимает 100% ширины при загрузке страницы, но показывает штраф при изменении размера

Ответ 1

Я разработал для этого решение.

Просто добавьте следующие строки в ng-grid.js внутри ng.EventProvider.

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

Ответ 2

Это сработало для меня

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

Замените "gridOptions" на используемую вами переменную и бинго!

Ответ 3

Попробуйте установить ng - если включить только сетку, когда есть данные для отображения: (ng-hide не работает для меня)

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

Источник: https://github.com/angular-ui/ng-grid/issues/855

Связанный вопрос: Когда ng-сетка меняет видимость от невидимого до видимого с помощью ng-hide, ширина сетки не пересчитывается

Ответ 4

У меня была такая же проблема, используя вкладки из Angular UI Bootstrap.

Простейшим решением является запуск события resize в родительском элементе ng-grid,
предпочтительно, когда выбрана вкладка, содержащая ng-сетку.

ng-сетка будет правильно изменять размеры этого события.

Используйте что-то вроде этого:

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

Ответ 5

Вы можете использовать сетки ngGridLayoutPlugin (найденные здесь) и вызвать его в функции инициализации контроллеров.

    var layoutPlugin = new ngGridLayoutPlugin();


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


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

    };

Ответ 6

Если у вас есть обработчик после загрузки сетки, вы можете вызвать метод, который на самом деле повторно отображает сетку при изменении размера окна.

gridApi.core.handleWindowResize()

Это может помочь вам при каждом вызове события изменения размера вручную.

Ответ 7

Это изменение будет намного лучше с точки зрения загрузки процессора.

Линия 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);

Ответ 8

В моем случае я переместил скрипты библиотеки 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>

Ответ 9

Надеюсь, это спасет кого-то еще, когда я потрачу на работу в сценариях, где это все еще проблема. Для меня моя последняя ширина столбца была "*", и обрезание не является проблемой, поэтому использование обертки 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;
}

Ответ 10

Вы все сложны, это не лучший способ внести изменения в исходный код.

Просто добавьте в div

data-ng-show="myData.length"

Где myData является источником данных Grid, убедитесь, что загрузка данных асинхронизирована или задано значение $timeout для метода данных загрузки.

Я знаю, что у ngGrid есть метод под названием getPagedDataAsync, назовем его из документа JQuery готовым, некоторые вроде этого:

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

Если вы не являетесь пейджинговыми данными, просто вызовите свой метод загрузки пользовательских данных из документа JQuery.

Надеюсь, это поможет:)

Привет