2010-12-08 97 views
4

私はjqGridにマイナーな表示の問題があります。私はそれがバグだと主張することはできませんが、それはユーザを混乱させるので、それに対処するように求められています。しかし、私の方が良くなっているようです。jqGridサブグリッドの水平スクロールバーを非表示にするにはどうすればよいですか?

親グリッド行を展開するとサブグリッドが読み込まれるサブグリッドが使用されています(下のコードを参照)。私は全体の設定を単純化して読みやすくしました。ほとんどの場合、1つのカラムを除くすべてのカラムを削除し、colModelをシンプルに保ちます。親グリッドには、画面上にないデータを表示するために、右から左にスクロールできる水平スクロールバーがあります。画面がすべてのデータを表示するのに十分な大きさである場合、親グリッド上の水平スクロールバーは消えます。

サブグリッドが読み込まれると、100%の幅で読み込まれ、大きな効果が得られます。親グリッドが展開され、サブグリッド全体が表示され、親グリッドの水平スクロールバーで前後にスクロールしてすべてのデータを表示できます。表示されるサブグリッドの数や数にかかわらず、すべての水平スクロール用に1つのスクロールバーがあります。

残念ながら、サブグリッドにも水平スクロールバーが表示されますが、グリッド幅が100%であるため、このスクロールバーは何もしません。彼らはスクロールするためにそれを使用しようとすると何も動かない。

サブグリッド上にこの水平スクロールバーを隠すことができるjqGrid設定やCSS「magic」はありますか?私はChromeの開発ツールを使用しましたが、スクロールバー、タイトル、ヘッダー、データの行だけに関連付けられたDIVタグはないようです。

バージョン:

  • jQueryの :          1.4.2
  • jQueryUI  :    1.8.5
  • jqGrid  :            3.8.1
  • ブラウザ : クローム8、IE 8
jQuery(document).ready(function() { 
    jQuery('#ParentGrid').jqGrid({ 
     url: '[URL TO GET DATA]', 
     width: '100%', 
     height: '100%', 
     shrinkToFit: 'false', 
     datatype: 'json', 
     mtype: 'POST', 
     jsonReader: { repeatitems: false }, 
     sortname: 'ParentRowID', 
     sortorder: 'asc', 
     colNames: [ 
      'Parent Row ID' 
     ], 
     colModel: [ 
      { name: 'ParentRowID', index: 'ParentRowID', width: 110, align: 'left' } 
     ], 
     gridComplete: function() { 
      $('.ui-jqgrid-titlebar-close', '#ParentGrid').remove(); 
     },    
     subGrid: true, 
     subGridRowExpanded: function (subgrid_id, row_id) { 
      var subgrid_table_id = subgrid_id + '_t'; 
      $('#' + subgrid_id).html("<table id='" + subgrid_table_id + "' cellpadding='0' cellspacing='0'></table>"); 
      $('#' + subgrid_table_id).jqGrid({ 
       url: '[URL TO GET DATA BASED ON PARENT GRID SELECTED ROW ID]', 
       width: '100%', 
       height: '100%', 
       shrinkToFit: 'false', 
       datatype: 'json', 
       mtype: 'POST', 
       jsonReader: { repeatitems: false }, 
       sortname: 'ChildRowID', 
       sortorder: 'asc', 
       colNames: [ 
        'Child Row ID' 
       ], 
       colModel: [ 
        { name: 'ChildRowID', index: 'ChildRowID', width: 110, align: 'left' } 
       ], 
       gridComplete: function() { 
        $('.ui-jqgrid-titlebar-close', '#' + subgrid_table_id).remove(); 
       } 
      }); 
     } 
    }); 
}); 
+0

このバグを修正しましたか?シェアしてください? –

答えて

-1

は、ページネーションを与え、垂直スクロールバーが削除されるように、結果グリッドの高さを増します。これにより、水平スクロールバーも削除されます。

+0

実際、私はこれをすべて行い、それは「メイン」または「アウター」グリッドでのみ機能します。 Iitはサブグリッドでは機能しません。 – Tony

0

私は同じ問題を抱えています。私はCSSを追加して解決しました。あなたは次のようにすることができます:

#ParentGrid .ui-jqgrid-bdiv{ 
     overflow-x:hidden; 
    } 
関連する問題