21

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

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

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

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

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

4

6 に答える 6

21

これらのクラスは、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 {...}
...
于 2013-12-01T15:25:19.147 に答える
2

私はこの質問に参加したいと思いました。この例をフォローアップし、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

于 2014-04-16T21:02:48.917 に答える
1

アダプトストラップ。これがフィドルです。

これは非常に軽量で、動的な行の高さを備えています。

<ad-table-lite table-name="carsForSale"
               column-definition="carsTableColumnDefinition"
               local-data-source="models.carsForSale"
               page-sizes="[7, 20]">
</ad-table-lite>
于 2014-09-06T07:28:20.460 に答える
1

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

于 2014-05-12T16:10:24.763 に答える