web-dev-qa-db-ja.com

jqGrid水平スクロールバー

私はAJAX jQueryおよびjqGridとのインターフェースを開発しました。

JqGridテーブルから水平スクロールバーを削除するにはどうすればよいですか？

http://dskarataev.ru/jqgrid.png

_autowidth: true_を設定すると、テーブルの幅=列の合計幅が得られますが、テーブルの幅=関数getSelectedTabHref()によって返されるIDを持つ親要素の幅が必要です

だから私は機能を作ります：

_$(window).bind('resize', function() {
  $('#tasks').setGridWidth($(getSelectedTabHref()).width());
  $('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');
_

ここにjqGridテーブルの作成方法を示します。

_$('#tasks').jqGrid({
  datatype: 'local',
  colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
  colModel :[
    {name:'taskId', index:'taskId', width:1, align:'right'},
    {name:'taskAdded', index:'taskAdded', width:3},
    {name:'taskOperator', index:'taskOperator', width:4},
    {name:'taskClient', index:'taskClient', width:7},
    {name:'taskManager', index:'taskManager', width:4},
    {name:'taskDesc', index:'taskDesc', width:8}]
});
_
jqueryjquery-pluginsjqgridscrollbarhorizontal-scrolling
32
dskarataev

ui.grid.cssを調整しました。水平スクロールバーがまったく必要なかったからです。これは私がしました：

.ui-jqgrid .ui-jqgrid-bdiv {
  position: relative; 
  margin: 0em; 
  padding:0; 
  /*overflow: auto;*/ 
  overflow-x:hidden; 
  overflow-y:auto; 
  text-align:left;
}

コメントはそれがどうだったか、私はちょうど水平スクロールバーを非表示にするためにoverflow-xを使用しましたが、今はすべてうまくいきました。

75
Herman van der Blom

JqGridがグリッド幅を正しく計算しない状況がいくつかあります。 cellLayoutパラメーターを増やしてみてください（ http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options を参照）。これは、jqGridからCSSを変更する場合に必要になることがあります。

他のいくつかの状況では、 で説明した関数fixGridWidthまたはfixGridSizeに関して幅を修正できます。jQueryUIダイアログ内のjqGridでsetGridWidthを正しく呼び出します 。 loadComplete内で使用することを忘れないでください。

5
Oleg

グリッドに明示的なwidthを設定して使用します

autowidth: false,
shrinkToFit: true
4
arviman

以下のスクリプトをstyle.cssに追加すると問題が解決します。

.ui-jqgrid .ui-jqgrid-bdiv {
    overflow-x:hidden !important; 
    overflow-y:auto !important;
}
1
Hari Prasad Ranganathan

setGridWidthは、グリッドを指定された新しい幅に確実にリサイズしますが、autowidth = trueで使用することを確認してください。 setGridWidthには、IE 7程度の問題があります。

ここで説明するいくつかの実用的なソリューション（まだ解決策を見つけていない場合）、

ブラウザのサイズが変更されたときにjqGridのサイズを変更しますか？

http://www.trirand.com/blog/?page_id=393/discussion/browser-resize-how-to-resize-jqgrid/

- - 古い - -

試すことができるオプションがいくつかありますが、

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options から

"autowidth" : true

または

"shrinkToFit": false

それ以外の場合は、jqgridコードを投稿して、分析してみましょう。

1
Prem Rajendran

さあ行こう width : '1083'、shrinkToFit:false,

上記を設定するとき、ui.jqgird.cssは以下のように設定されます

.ui-jqgrid .ui-jqgrid-bdiv { height: auto; margin: 0em; max-height: 250px; overflow-x: auto; overflow-y: auto; padding: 0px; position: relative; text-align: left; }
1
kiran vennampelli

少し遅れますが、誰かに役立つかもしれません

テーブルの高さは数字でのみ設定する必要があり、最後に「px」を付けないでください

1
Agustin Baez

適用AppearanceSettingsShrinkToFit="False"およびAutoWidth="true"をjqGridに。

0
Ankit Gupta

私はjqgridでこのタイプのCSSを調整します

.ui-jqgrid .ui-jqgrid-bdiv {
 position: relative;
 margin: 0;
 padding: 0;
 overflow: auto;
 text-align: left;
}
0
Foram Thakral

jqgrid APIメソッドsetGridHeightを使用しました。 IE 8でもうまくいきます。

var gr = jq('#grid');
gr.setGridHeight(350,true);

この行を「loadComplete」関数呼び出しの下に配置します。

0
Sam

その単純な、jqgrid shrinkToFit: false

0
cavalsilva

ここに私がそれをやった方法とこれまでのところ、とても良いです。基本的に、垂直スクロールバーに対応するようにグリッドのサイズを変更します。サイズを変更しても、水平方向のオーバーフローは発生しないため、水平バーは表示されません。セルのサイズ変更は同じままで、最後のセルは部分的に非表示になりません。

loadComplete: function (data) {
                //set our "ALL" select option to the actual number of found records
                $(".ui-pg-selbox option[value='ALL']").val(data.records);
                if ($(".ui-jqgrid").height() > $('#grid').getGridParam('maxHeight')) {
                    //resize our grid for the vertical scroll bar to eliminate the hortizontal scroll bar
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width') + 17);
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width') + 20);
                    $("#pager").css("width", $('#grid').getGridParam('width') + 20);
                    $(".ui-jqgrid-hbox").css("padding-right", "16px");
                } else { //set everything to defaults
                    $(".ui-jqgrid").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-bdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hdiv").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-view").css("width", $('#grid').getGridParam('width'));
                    $("#pager").css("width", $('#grid').getGridParam('width'));
                    $(".ui-jqgrid-hbox").css("padding-right", "0px");
                }
}
0
Chris