UI-Grid не принимает 100% ширину при загрузке страницы

Я использую ui-grid для отображения данных в таблице. когда я загружаю страницу и оставляю на несколько секунд, а затем щелкаю по вкладке (содержащей ui-сетку), раскол ci-сетки ui. он не показывает ширину ui-сетки 100% контейнера. но когда я загружаю страницу и просто нажимаю на вкладку (контингент ui-grid). ui-grid показывает идеальную, я имею в виду ширину, составляющую 100% контейнера. Я не знаю, в чем проблема. Это код, я работаю над:

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 находится внутри вкладки Angular bootstrap

и вот снимок сетки коллапса:

Ответ 1

Используете ли вы анимацию при загрузке страницы - возможно, вкладку или модальную? Если это так, то обычным обходным решением является тот, который мы используем в модальном учебнике: http://ui-grid.info/docs/#/tutorial/110_grid_in_modal

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

Ответ 2

используйте $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);
    }

Ответ 3

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

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

Это помогло мне.

Ответ 4

Обходной путь для этого - добавление ширины и rowHeight для строки и ячейки. Поскольку я указал, что это обходной путь, и я уверен, что там должны быть другие способы сделать это, но это быстрое решение и должно получить то, что вы хотя бы собираетесь:)

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

Ответ 5

С помощью предлагаемого метода опроса функция вызывается после определенного ожидания, поэтому каждое изменение ширины происходит внезапно. Это приводит к существенному искажению, когда пользователь быстро меняет размер таблицы.

Намного лучше использовать привязку обработчика изменения размера, чтобы вызвать функцию изменения размера, когда область просмотра изменяет

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

В моем проекте используется боковая панель, поэтому я учитываю ширину боковой панели или ширину заполнения (если боковая панель открыта или нет), просто установите переменную, привязанную к 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>

Ответ 6

Это то, что сработало для меня как шарм!

Добавьте say ng-style="windowResize" к разметке сетки ui в шаблоне HTML и в $scope.windowResize добавьте width: 100% внутри функции onRegisterApi в пределах области.

Таким образом, в основном onRegisterApi() является функцией по умолчанию из ui-grid, которая запускается, когда сетка действительно нарисована, и поэтому в основном мы условно добавляем ширину 100% к сетке и делаем ее отзывчивой для всех видовых экранов.

Ответ 7

Удалите ui-grid-resize-columns из тегов HTML div.