スクロールバーがjqGridに表示されないようにするにはどうすればよいですか？|Codeflow

スクロールバーがjqGridに表示されないようにするにはどうすればよいですか？

jqGridを使用していますが、水平スクロールバーが表示されます。どうすればこれを防ぐことができますか？

image：https：//i.stack.imgur.com/NwMyP.png [スクロールバー付きのjqGrid]

jquery jqgrid

Source

3 Answer

場合によっては、さまざまな問題が原因でグリッドサイズの計算が正しくなくなり、水平スクロールバーが表示されることがあります。問題は主に基づいています

変更せずにjqGridに継承したCSSのいくつかの変更 jqGridの「cellLayout」パラメーター
異なるCSSスタイルの異なる継承実装ブラウザ
jqGridの幅計算アルゴリズムのエラー。グリッドサイズはグリッドにデータを入力した後、正しく調整されません。

私のASP.NET MVCプロジェクトでは、グリッド列の幅がほとんど5ピクセル必要でしたが、合計グリッド幅は5 * colNumbersに増やす必要がありました。

間違ったグリッド幅の問題は、デバッグおよび修正が困難です。だからしばらく前に、私は私の答えhttps://stackoverflow.com/questions/2686043/correctly-calling-setgridwidth-on-a-jqgrid-inside-a-jqueryui-dialogで初めて提案した実用的な回避策を書いた/ 2696776＃2696776 [jQueryUIダイアログ内のjqGridでsetGridWidthを正しく呼び出す]。回避策のアイデアは、グリッドのサイズを、スクロールされるグリッドの一部の `scrollWidth`プロパティと比較することです。スクロールバーが存在し、グリッドのサイズがグリッドを含むページの要素のサイズよりも小さい場合、グリッドの幅を増やすだけでスクロールバーは消えます。

たとえば、jqGridテーブルを持つ次のHTMLフラグメントがあります

then the schema how you can fix the horizontal scrolling 問題は次の可能性があります。

jQuery(document).ready(function () {
    var fixGridWidth = function (grid, mainBlockSelector) {
        // fix wrong width calculation 5 pixel per column
        //var gview = jQuery("#gview_" + grid[0].id); // like "#gview_grid"
        //var gview = grid.parent().parent().parent();
        var gviewDomElement = grid[0].parentNode.parentNode.parentNode;
        var gviewScrollWidth = gviewDomElement.scrollWidth;
        var mainWidth = jQuery(mainBlockSelector).width();
        var gridScrollWidth = grid[0].scrollWidth;
        var htable = jQuery('table.ui-jqgrid-htable', gviewDomElement);
        var scrollWidth = gridScrollWidth;
        if (htable.length > 0) {
            var hdivScrollWidth = htable[0].scrollWidth;
            if ((gridScrollWidth < hdivScrollWidth)) {
                // max (gridScrollWidth, hdivScrollWidth)
                scrollWidth = hdivScrollWidth;
            }
        }
        if (gviewScrollWidth != scrollWidth || scrollWidth > mainWidth) {
            // min (scrollWidth, mainWidth)
            var newGridWidth = (scrollWidth <= mainWidth)? scrollWidth: mainWidth;
            // if the grid has no data, gridScrollWidth can be less
            // then hdiv[0].scrollWidth
            if (newGridWidth != gviewScrollWidth) {
                grid.jqGrid("setGridWidth", newGridWidth);
            }
        }
    };

    var grid = jQuery("#grid");
    grid.jqGrid({
        // ... all like allways
        loadComplete: function(data) {
            // do all what you need and then at the end fix the wigth:
            fixGridWidth(grid,"#main");
        },
        // ... other jqGrid options
    };
});

コードの冒頭で、データを持つメイングリッドテーブル上の異なるdivとテーブルで構成されるグリッドの構造を使用します。 IE8またはChrome開発者ツール、他のツールのFirebugで見ることができるこの構造。この構造の大部分については、他の質問に対する古い回答で説明していますhttps://stackoverflow.com/questions/3462071/jqgrid-get-th-and-thead-using-jquery/3463002#3463002[jqGrid get th and thead Jqueryを使用]およびhttps://stackoverflow.com/questions/2683108/jqgrid-footer-cells-inherits-css-from-cells-in-the-main-grid/2697747#2697747[jqGrid footer cells“ inherits” CSS fromメイングリッドのセル]。

このアプローチを使用してみてください。スクロールの問題の理由を検索しませんが、それでも水平スクロールのほとんどの問題を修正できます。

Source

それでもうまくいかない場合は、CSSを変更してみてください。

    'cellLayout' =>  21,

Source

水平スクロールバーの問題を修正するために非常に多くのソリューションを試しましたが、完全に成功しませんでした。私のために機能する最良かつ最も簡単なソリューション（すべてのブラウザでテスト済み）：

loadComplete: function(data) {
   fixGridWidth($("#grid"));
}

function fixGridWidth(grid) {
    grid.setGridWidth($(window).width());
}

Source