Подтвердить что ты не робот

Ng-сетка Авто/Динамическая высота

Как получить ng-сетку для автоматического изменения ее высоты в зависимости от размера страницы? Документация на сайте ng-grid использует фиксированную высоту. Лучшее решение, которое я видел, происходит из этой ссылки:

.ngViewport.ng-scope {
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer {
    width: auto !important;
}

Это не работает с поисковым сервером на стороне сервера. Я скопировал пример подкачки на стороне сервера с сайта ng-grid и применил css выше, но, как вы можете видеть, отображаются только первые 6 строк: http://plnkr.co/edit/d9t5JvebRjUxZoHNqD7K?p=preview

И {height: 100%} не работает...

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете попробовать использовать ng-grid Flexible Height Plugin, все, что вам нужно сделать, это добавить этот плагин к свойству plugins в настройках сетки и он позаботится обо всем остальном.

Пример:

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    plugins: [new ngGridFlexibleHeightPlugin()]
};

Пример в реальном времени: http://plnkr.co/edit/zNHhsEVqmpQmFWrJV1KQ?p=preview

Ответ 2

Если вы не хотите добавлять плагины, я внедрил простое решение для динамического изменения высоты таблицы строго на основе видимых строк. Я использую Ui-Grid-Unstable v3.0. Не нужно прикасаться к CSS.

Мой HTML выглядит так:

<div id="grid1" ui-grid="gridOptions" ui-grid-grouping ui-grid-exporter class="grid"></div>

В контроллере добавьте:

$scope.$watch('gridApi.core.getVisibleRows().length', function() {
    if ($scope.gridApi) {
        $scope.gridApi.core.refresh();
        var row_height = 30;
        var header_height = 31;
        var height = row_height * $scope.gridApi.core.getVisibleRows().length + header_height;
        $('.grid').height(height);
        $scope.gridApi.grid.handleWindowResize();
    }
});

И чтобы отключить прокрутку, добавьте следующую строку, где инициализируются gridOptions:

enableVerticalScrollbar : uiGridConstants.scrollbars.NEVER,

Убедитесь, что uiGridConstants передан в ваш контроллер:

angular.module('app').controller('mainController', function($scope, uiGridConstants) { ...

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

Ответ 3

Я думаю, что я решил эту проблему отлично через 48 часов,

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination', 'ui.grid.autoResize']);

app.controller('MainCtrl', ['$scope', '$http', '$interval', function($scope, $http, $interval) {

  var paginationOptions = {
    pageNumber: 1,
    pageSize: 20,
  };
  $scope.currentPage = 1;
  $scope.pageSize = paginationOptions.pageSize;
  $scope.gridOptions = {
    rowHeight: 30,
    enableSorting: true,
    paginationPageSizes: [$scope.pageSize, $scope.pageSize * 2, $scope.pageSize * 3],
    paginationPageSize: paginationOptions.pageSize,
    columnDefs: [{
      name: 'name'
    }, {
      name: 'gender',
      enableSorting: false
    }, {
      name: 'company',
      enableSorting: false
    }],
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;
      gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
        paginationOptions.pageNumber = newPage;
        paginationOptions.pageSize = pageSize;
        $scope.pageSize = pageSize;
        $scope.currentPage = newPage;
        $scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
      });
    }
  };

  var loadData = function() {
    var url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
    $http.get(url)
      .success(function(data) {
        $scope.gridOptions.totalItems = data.length;
        $scope.totalPage = Math.ceil($scope.gridOptions.totalItems / $scope.pageSize);
        $scope.gridOptions.data = data;
      });
  };

  loadData();

  // for resize grid height
  $scope.tableHeight = 'height: 600px';

  function getTableHeight(totalPage, currentPage, pageSize, dataLen) {
    var rowHeight = 30; // row height
    var headerHeight = 50; // header height
    var footerHeight = 60; // bottom scroll bar height
    var totalH = 0;
    if (totalPage > 1) {
      // console.log('hehehehe');
      if (currentPage < totalPage) {
        totalH = pageSize * rowHeight + headerHeight + footerHeight;
      } else {
        var lastPageSize = dataLen % pageSize;
        // console.log(lastPageSize);
        if (lastPageSize === 0) {
          totalH = pageSize * rowHeight + headerHeight + footerHeight;
        } else {
          totalH = lastPageSize * rowHeight + headerHeight + footerHeight;
        }
      }
      console.log(totalH);
    } else {
      totalH = dataLen * rowHeight + headerHeight + footerHeight;
    }
    return 'height: ' + (totalH) + 'px';
  }

  $interval(function() {
    $scope.tableHeight = getTableHeight($scope.totalPage,
      $scope.currentPage, $scope.pageSize,
      $scope.gridOptions.data.length);
    console.log($scope.tableHeight);
    $scope.gridApi.grid.handleWindowResize();
    $scope.gridApi.core.refresh();
  }, 200);


}]);
.grid {
  width: 600px;
}
<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <div ui-grid="gridOptions" ui-grid-pagination id="grid" style="{{tableHeight}}"></div>
    <div>
      <p>Current Page: {{ currentPage }}</p>
      <p>Total Page: {{ totalPage }}</p>
      <p>Page Size: {{ pageSize }}</p>
      <p>Table Height: {{tableHeight}}</p>
    </div>
  </div>


  <script src="app.js"></script>
</body>

</html>

Ответ 4

$( "gridStyle." ) CSS ( "высота", "");.

удалите свойство height в вашем классе gridstyle, а затем установите динамическую высоту, установленную на вашей ng-сетке.

Ответ 5

вы можете добавить auto style примерно так:

ng-style="{ 'height': myData.length*34 }", а myData -

Ответ 6

Я нахожу, что использование этого фрагмента кода в таблице стилей решает мою проблему. Я отключил плагин, но он работает в любом случае.

 .ngViewport.ng-scope{
    height: auto !important;
    overflow-y: hidden;
}

.ngTopPanel.ng-scope, .ngHeaderContainer{
    width: auto !important;
}
.ngGrid{
    background-color: transparent!important;
}

Я надеюсь, что это поможет кому-то!

Ответ 7

В методе, в котором вы пытаетесь сохранить данные для каждой строки в каждой сетке, добавьте код для вычисления длины сетки в отдельном массиве и нажмите эту рассчитанную длину на другой массив. Убедитесь, что индекс сетки и индекс массива должны быть одинаковыми, чтобы мы могли получить доступ к нему из пользовательского интерфейса. Мой подход был следующим:

                    //Stores the calculated height of each grid.
                    $scope.gridHeights = [];


                   //Returns the height of the grid based on the 'id' passed from the UI side.
                   //Returns the calculated height appended with 'px' to the HTML/UI
                    $scope.getHeight = function(id){
                        if($scope.gridHeights[id]) {
                            return {
                                'height': $scope.gridHeights[id] + 'px'
                            };
                        }else{
                            return {
                                'height': '300px'
                            };
                        }
                    };


                    for (var idx = 0; idx < $scope.auditData.length; idx++) {

                        //gets the rows for which audit trail/s has to be displayed based on single or multi order.
                        $scope.gridData[idx] = $scope.auditData[idx].omorderAuditTrailItems;

                        //Calculates and pushes the height for each grid in Audit Trail tab.
                        $scope.gridHeights.push(($scope.auditData[idx].omorderAuditTrailItems.length + 2)*30);


        //IN HTML, set the height of grid as :
        <div id='orderAuditTrailList'>
            <div class="row fits-auditTrail" ng-style="getHeight(id)">
                <div class="fits-ng-grid" ng-if="auditTrail.omorderAuditTrailItems.length>0" ng-grid="gridOrderAuditTrailList[id]" ng-style="getHeight(id)"></div>
            </div>
    </div>