web-dev-qa-db-ja.com

Angular ng-grid row height

その内容に従ってng-gridの行の高さを適用する方法はありますか？すべての行の高さを変更する1つのオプションrowHeightがあります。しかし、私はその内容に応じて動的な行の高さを求めています。

以下は私が作成したプランカーです。この例では、cellTemplateを使用してEducationフィールドを挿入しましたが、Educationフィールドの詳細に従って行の高さを増やしたいと思います。

http://plnkr.co/edit/tQJNpB?p=preview

このリンクによると、それは不可能です：[1] https://github.com/angular-ui/ng-grid/issues/157

しかし、誰かが解決策を見つけたら.....

javascriptcssangularjsng-grid
21
Poonam Gokani

これらのクラスは、display table-rowとtable-cellを使用して、テーブルを実際のテーブルとして機能させます。

.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;
}

これはIE8以降でサポートされていることに注意してください。また、ngグリッドクラス全体をオーバーライドしているため、「必要」ベースで使用するのが賢明です。

#myTableId .ngCell {...}
#myTableId .ngRow {...}
...
21
Yair Tavor

これを調査したところ、私の修正では、ngGridデータに変更を加えるたびに匿名関数$scope.resizeViewPortを呼び出すか、ビューポート行が更新されるたびに呼び出す必要があることがわかりました。

例はangularの後にあります。ng-gridモジュールからのデータを介して行の更新を実行します。これらの手順は、高さのみの無名関数で役立ちます。

$scope.resizeViewPort = function { // and the two steps below
  // retrieve viewPortHeight
  var viewportHeight = $('ngViewPort').height();
  var gridHeight = $('ngGrid').height();

  // set the .ngGridStyle or the first parent of my ngViewPort in current scope
  var viewportHeight = $('.ngViewport').height();
  var canvasHeight = $('.ngCanvas').height();
  var gridHeight = $('.ngGrid').height();

  alert("vp:" + viewportHeight + " cv:" + canvasHeight + " gh:" + gridHeight);
  var finalHeight = canvasHeight;
  var minHeight = 150;
  var maxHeight = 300;


  // if the grid height less than 150 set to 150, same for > 300 set to 300
  if (finalHeight < minHeight) {
    finalHeight = minHeight;
  } else if (finalHeight > viewportHeight) {
    finalHeight = maxHeight;
  }

  $(".ngViewport").height(finalHeight);
}
2
user3250966

私はこの質問に付き合いたかった。私はこの例を追跡し、getuliojrが提供するソリューションを使用しました。このソリューションはかなりうまく機能しているようです。アプリで使用するには、フォークを複製してソースをビルドする必要があることに注意してください。私はそれの作業のプランカーのライブを持っています： http://plnkr.co/edit/nhujNRyhET4NT04Mv6Mo?p=preview

2つのCSSルールも追加する必要があることに注意してください。

.ngCellText{
    white-space:normal !important;
    }

.ngVerticalBarVisible{
      height: 100% !important;
    }

重要な負荷またはブラウザ間でこれをテストする必要はまだありませんが、実行するとさらに更新されます。

Getuliojrによる柔軟な高さのng-gridのGHリポジトリ： https://github.com/getuliojr/ng-grid/commits/master

2
jeffreynolte

Adapt-Strap 。これが fiddle です。

非常に軽量で、動的な行の高さがあります。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
1
kashyaphp

これらのソリューションはどれも完全には機能しません。固定されている高さは、コード全体を通して想定されます。行の仮想化ではこれを想定するのが一般的です。これは、一度にすべての行をロードするのではなく、グリッドの最終的な高さを判断することが非常に難しいためです。 NGrid 3.0は動的な行の高さをサポートすることになっていますが、いつ準備ができるかはわかりません。

1
Chris Stephens

それは世界で最もセクシーなものではありませんし、そのパフォーマンスは疑わしいですが、これでうまくいきます：

function flexRowHeight() {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.domUtilityService = services.DomUtilityService;
        self.grid = grid;
        self.scope = scope;

        var adjust = function() {
            setTimeout(function(){
                var row = $(self.grid.$canvas).find('.ngRow'),
                    offs;
                row.each(function(){
                    var mh = 0,
                        s = angular.element(this).scope();

                    $(this).find('> div').each(function(){
                        var h = $(this)[0].scrollHeight;
                        if(h > mh)
                            mh = h

                        $(this).css('height','100%');
                    });

                    $(this).height(mh)

                    if(offs)
                        $(this).css('top',offs + 'px');

                    offs = $(this).position().top + mh;
                    self.scope.$apply(function(){
                        s.rowHeight = mh;
                    });
                });
            },1);
        }

        self.scope.$watch(self.grid.config.data, adjust, true);
    }
}

オプションのプラグインを使用して実行：

plugins: [new flexRowHeight()]
0
btm1