13

SlickGridをjQuery Layout UIで使用しようとしていますが、SlickGridが親ペインの 100% の高さを占めるようにします。

問題は、SlickGrid がインスタンス化されたときに、行がない (私の ajax インターフェイスの一部が、ページの読み込みではなく、後でデータに読み込まれる) ため、高さがデフォルトで 1px (ヘッダーの高さに加えて) のような値に設定されることです。後でデータをロードすると、どの行も表示されません。

SlickGrid DOM 要素を に設定しようとしましたheight: 100%;が、何もしません。データの行数が少ない場合でも、SlickGrid キャンバスがペインの 100% の高さを占めるようにするにはどうすればよいですか?

4

5 に答える 5

5

同様のエラーが発生したが、状況が異なる私のような人のために：

wikiから- 「slickgrid コンテナーの明示的な幅と高さがマークアップに必要です。そうしないと、グリッド本体が表示されず (高さ:1px)、グリッドはグリッド ヘッダーの幅 (幅:100000px) を取得します。」

したがって、メイン グリッド div に幅と高さを指定することを忘れないでください。

ps: ここでのこの質問には当てはまらないと思いますが、これは「slick grid 1px bug」の検索でポップアップした唯一の質問でした:-/

于 2012-01-17T12:31:00.843 に答える
4

私も好きではない答えを出しますが、私のjavascriptスキルは限られているため、これは私がより良いものを見つけるまで使用しているソリューションです.

基本的に、ドキュメントの高さを取得し、次のように、slickgrid の外側にある他の要素の高さを差し引きます。

  $("#id-of-slickgrid-container").height(
      $(document).height() -
      $("#header").outerHeight() -
      $("#nav").outerHeight() -
      $("#footer").outerHeight() - 44
  );

「44」は、slickgrid などの内部で使用される余分なスペースの高さに十分近い数字です。

于 2011-05-06T22:12:24.630 に答える
2

この回答が引き続き役立つことを願っています。別の回答で見つけました: https://stackoverflow.com/a/10878955/4606828

Slickgrid オプションに次を追加しますautoHeight。

options = {
       ...
       autoHeight: true
       };

Slickgrid は常にそのコンテンツと共に成長し、親の高さを任意に設定できます。

于 2015-06-13T15:36:14.437 に答える
0

Van の回答を参考にして、次のように調整しました。マジック ナンバーはまだありますが、少なくとも特定のコンテナーについて知る必要はありません。

HTML:

<div id="myGridSizer"></div>
<div id="myGrid"></div>

CSS:

#myGrid {
    width: 100%;
}

#myGridSizer {
    top: 73px;
    bottom: 73px;
    width: 0;
    position: absolute;
}

JavaScript:

$("#myGrid").height($('#myGridSizer').outerHeight());
grid = new Slick.Grid("#myGrid", dto.data, dto.columns, options);
于 2015-06-11T17:08:53.777 に答える