0

この質問はすでにここで尋ねられましたAngular ng-grid row height

しかし、CSS を使用してページの応答性や ng-grid の sort などのヘッダー機能に影響を与える問題を修正する場合、それはすべて私の要件を満たしていません。 

.ngCell  {
  display : table-cell;
  height: auto !important;
  overflow:visible;
  position: static;
}

.ngRow {
  display : table-row;
  height: auto !important;
  position: static;
}

.ngCellText{
  height: auto !important;
  white-space: normal;
  overflow:visible;
}

ページの応答性に影響を与えずにこれに対する解決策があり、純粋な Java スクリプト/ angularjs/css で解決する必要があります

4

1 に答える 1

1

表示されている行に厳密に基づいてテーブルの高さを動的に変更する簡単なソリューションを実装しました。Ui-Grid-Unstable v3.0 を使用しています

私の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) { ...

お役に立てれば！

于 2015-07-29T16:49:26.917 に答える