8

私は自分のプロジェクトの1つでjQueryレイアウトプラグインとjqGridプラグインを使用していますが、少し問題があることを除けば、これらはうまく機能します...

jqGridを含むペイン（jQueryレイアウトペイン）を完全に埋めてほしい。ペインのサイズを変更するとjqGridのサイズが変更され、ペインを閉じるとjqGridなどが非表示になります。

jqGridとjQueryLayoutはどちらもコールバックを提供しますが、それらを使用すると、ページレイアウトがひどく壊れます。

jqGridとjQueryLayoutを組み合わせた経験はありますか？

  1. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  2. http://layout.jquery-dev.net/
4

3 に答える 3

6

グリッドのサイズを変更するためのいくつかの手法について説明しているresize-jqgrid-when-browser-is-resizedを読むことをお勧めします。

于 2010-05-27T14:12:21.513 に答える
2

これが私の現在の解決策です：

まず、onresizeイベントによって呼び出されるサイズ変更関数を作成します。

function resizeGrid(pane, $Pane, paneState) {
  if(grid = $('.ui-jqgrid-btable:visible')) {
    grid.each(function(index) {
      var gridId = $(this).attr('id');
      $('#' + gridId).setGridWidth(paneState.innerWidth - 2);
    });
  }
}

次に、レイアウトで、このメソッドを呼び出すサイズ変更イベントを設定します。

$('#mylayout_id').layout({
  center: {
    closable: false,
    resizable: false,
    slidable: false,
    onresize: resizeGrid,
    triggerEventsOnLoad: true  // resize the grin on load also
  },
  west: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  },
  east: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  }
});

これにより、jqGridをレイアウトの任意のペイン内に配置でき、中央のペインのサイズが変更されたときに、そのペインに合わせてサイズが変更されます。

  1. http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/4a7c6b09206045f2
  2. http://www.secondpersonplural.ca/jqgriddocs/index.htm
  3. http://layout.jquery-dev.net/documentation.cfm
于 2010-05-28T02:17:06.003 に答える
2

私はjqgrid4.0（jquery struts 2プラグイン経由）とjQueryレイアウトプラグインを使用しています。前の答えは私にはうまくいきません。機能だけresizeGridが問題でした。resizeGrid上記の関数をこれに置き換えるだけです。これにより、1つのグリッド（IDが。のグリッド）のみのサイズが変更されgridtableます。

function resizeGrid(pane, $Pane, paneState) {
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};

#gridtablejqgrid用に作成するテーブル要素のIDです

<div id="grid_container">
  <table id="gridtable" class="mygrid"></table>
  <div id="grid_pgr"></div>
</div>

また、jquery struts2プラグインを使用している場合、グリッドは（内のスクリプトブロックではなく）< script >内のブロックを使用して自動的に生成されます。したがって、を呼び出して設定すると、javascriptエラーが発生します。これを回避するには、グリッドが宣言された後のどこかにこのスクリプトブロックを追加できます。< body >< head >layout()triggerEventsOnLoad: true< head >

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true');
});
</script>

複数のグリッドがある場合は、テーブル要素で定義したクラスを使用してそれらにアクセスし（上記のhtmlスニペットを参照）、resizeGridそれぞれでメソッドを実行できます。

于 2011-05-18T13:25:35.473 に答える