1

水平スクロールバーを下に置きすぎて失うことなく、(最初の) jqGrid を親コンテナに埋めるにはどうすればよいですか? scroll: 1（スクロールバーは、「仮想スクロール」などのオプションによって作成されたものです。）スクロールバーを許可せずに指定した高さを使用しているように見えるため、スクロールバーは、試している領域の下部を超えて終了しますグリッドのサイズ変更に関するこれらの2 つの 質問(およびその回答) を見てきましたが、便利ではありますが (ここまで説明してくれました)、スクロールバーの問題には対処していません。

ページのレイアウトは次のようになります (これは私のものではありません。変更できる可能性がありますが、それを避けることができれば最善の方法です。ただし、 でやりたいことはほぼ何でもできますgridWrapper)。

HTML:

<body>
  <div id="pageHeader">Header section</div>
  <div id="pageBody">
    <div id="gridWrapper" style="height: 100%">
    </div>
  </div>
  <div id="pageFooter">Footer section</div>
</body>

CSS:

body {
  margin: 0;
  padding: 0;
  font-family: verdana, sans-serif;
}
#pageHeader {
  width: 100%;
  height: 99px;
  border-bottom: solid 1px #ccc;
}
#pageBody {
  background-color: #fff;
  position: fixed;
  top: 100px;
  bottom: 45px;
  left: 0;
  right: 0;
}
#pageFooter {
  background-color: #eee;
  position: fixed;
  left: 0; 
  right: 0;
  bottom: 0;
  height: 44px;
  border-top: solid 1px #ccc;
}

私のグリッド作成/サイズ変更コードは次のようになります (テスト/プロトタイピング コードであることがわかります):

function createGrid(data) {
  var colNames, colModel, index, grid, gridParent, theFudge, heightFudge = 0;

  colNames = [
    "One", "Two", "Three", "Four", "Five",
    "Six", "Seven", "Eight", "Nine", "Ten",
    "Eleven", "Twelve", "Thirteen", "teen", "Fifteen",
    "Sixteen", "Seventeen", "Eightteen", "Nineteen", "Twenty",
    "Twenty One", "Twenty Two", "Twenty Three", "Twenty Four",
    "Twenty Five"
  ];
  colModel = [];
  for (index = 0; index < colNames.length; ++index) {
    colModel.push({
      name:   "col" + index,
      id:     "col" + index,
      width:  75
    });
  }

  gridParent = $("#gridWrapper");
  grid = $('<table id="theTable"></table>').appendTo(gridParent);
  grid.jqGrid({
    datatype:    'local',
    data:        data,
    height:      gridParent.height() - heightFudge,
    width:       gridParent.width(),
    shrinkToFit: false,
    colNames:    colNames,
    colModel:    colModel,
    rownumbers:  true,
    rownumWidth: 75,
    scroll:      1
  });

  $(window).resize(resizeGrid);

  function resizeGrid() {
    grid.jqGrid('setGridWidth', gridParent.width());
    grid.jqGrid('setGridHeight', gridParent.height() - heightFudge);
    grid.trigger('reloadGrid');
  }
}

そのheightFudge値が表示されます (上記では単に0)。高さをごまかさないと、スクロールバーは の下部を超えて、pageBodyに侵入します (そして、によって隠されます) pageFooter。フォントやウィンドウの装飾などを備えたブラウザでは、ファッジ ファクター (スクロールバーの高さ) は 24 ピクセルです。しかし、もちろんそれは異なります。

グリッド ラッパーを塗りつぶし、水平スクロール バーを指定した高さ内に保つにはどうすればよいですか? (または、実行時にファッジファクターを確実に決定するにはどうすればよいですか?

上記のライブ コピー(ソース リンク) には、テーブルのデータと、ファッジなどを試すためのコントロールが含まれています。

4

1 に答える 1

2

jqGridのheightパラメータを使用して、グリッドの内部の高さ (ボディの高さ) を指定できます。resizeGridを次のように変更することで問題を解決できるようです

function resizeGrid() {
  var $grid = $("#theTable"),
      $gbox = $grid.closest(".ui-jqgrid"), // or $("gbox_theTable");
      outerHeight = $gbox.height() - $grid.jqGrid('getGridParam', 'height');
  $grid.jqGrid('setGridWidth', gridParent.width());
  $grid.jqGrid('setGridHeight', gridParent.height() - heightFudge - outerHeight);
  $grid.trigger('reloadGrid');
}

resizeGridグリッドが作成された直後に、その高さを修正するために呼び出す必要があります。ここで固定デモを見ることができます。

于 2012-04-12T15:09:24.300 に答える