2011-12-18 10 views
0

マウスでサイズ変更可能なグリッドを使用する場合、expand/collapseボタンはjqGridで正しく機能しません。Drag'n'Resize jqGrid with expand/collapse

jqGridは、グリッドの幅/高さを設定するドラッグ可能なdivで囲まれています。私がグリッドを折り畳むと、グリッド自体が折りたたまれているにもかかわらず、 'resize' divが表示され続けます。

誰でもこの問題の提案がありますか? jqGridデモでさえこの問題があります。この問題は、一度最初にサイズを変更した後にのみ発生します。次に、グリッドを折りたたんでみてください。

http://trirand.com/blog/jqgrid/jqgrid.html

このデモでは、私の問題を複製しています。私はまったく同じコードを使用しています。ドラッグすると、グリッドもちょっと醜いように見えます。

答えて

0

jqgridのサイズを変更する機能を追加するたびに、グリッドのサイズを変更した後に生成されるグリッド内に実際にグリッドがラップされます。 Jqgridは、いくつかの問題を引き起こすインラインCSSの値を静的に設定するようです。

この問題を解決するために私が行ったことは、このイベントを引き起こすボタンを探すことです。 jqgridの場合、 'HeaderButton'というクラスのタグがあります(右上のボタンです)。そこで私はjQueryを使って 'click'イベントをターゲットにし、 'resize'ラッパーdivの高さを 'auto'に変更しました。これは美しく働いていた)

+0

;

//This first line select an element with a class="HeaderButton" $('.HeaderButton').click(function() { //Find the ID of the div that jqgrid is creating and replace RESIZEGRIDID with appropriate name if ($('#RESIZEGRIDID "/>').attr('data-status') != 'hidden' || $('#RESIZEGRIDID ').attr('data-status') == undefined) { $('#RESIZEGRIDID "/>').attr('data-status', 'hidden'); $('#RESIZEGRIDID "/>').css({ 'height': 'auto' }); } else { $('#RESIZEGRIDID "/>').attr('data-status', 'active'); $('#RESIZEGRIDID "/>').css({ 'height': 'auto' }); } 

うまくいけば、このヘルプ:

だから基本的に私はこれをしませんでした。それは私が欲しかった正確な仕事でした。ありがとう! – Jpepper