web-dev-qa-db-ja.com

ng-grid自動/動的高さ

ページサイズに基づいてng-gridの高さを自動的に変更するにはどうすればよいですか？ ng-gridのサイトのドキュメントでは、固定の高さが使用されています。私が見た最良の解決策はこれから来ます link ：

.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

そして{高さ：100％}は機能しません...

angularjsng-grid
19
CalebG

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

32
Alex Choroshin

プラグインを追加したくない場合は、表示行に厳密に基づいてテーブルの高さを動的に変更する簡単なソリューションを実装しました。 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) { ...

お役に立てれば！

5
mrmbr007

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's 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>

Plunkerも参照してください： http://plnkr.co/edit/np6y6rgN1ThnT0ZqyJeo?p=preview

1
Belter

スタイルシートでこのコードを使用すると、問題が解決したことがわかりました。プラグインを無効にしましたが、どちらの方法でも機能します。

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

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

私はそれが誰かを助けることを願っています！

0
David Villacis C.

次のような自動スタイルを追加できます。

ng-style="{ 'height': myData.length*34 }"、およびmyDataは

0
Fan super

$（ "。gridStyle"）。css（ "height"、 ""）;

gridstyleクラスのheightプロパティを削除してから、ng-gridに設定された自動動的高さを削除します。

0
user3843934

各グリッド内の各行のデータを保存しようとしているメソッドで、別の配列でグリッドの長さを計算するコードを追加し、その計算された長さを別の配列にプッシュします。 UIから一緒にアクセスできるように、グリッドのインデックスと配列のインデックスが同じであることを確認してください。私のアプローチは次のとおりです。

                    //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>
0
Purnima Nagpal