web-dev-qa-db-ja.com

jqGridがChrome / Chromeフレームで正しくレンダリングされません

現在使用しているChrome v19.0.1084.46（公式ビルド135956）beta-m jqGrid 4.3.2（最新リリース）

問題は、グリッド、列、またはdivのサイズに関係なく、最後の列のごく一部がグリッドの端を超えてプッシュされ、水平スクロールバーが表示されることです。下記参照：

grid

これを試して修正するために、jqGridで次の属性をいじっていました。

  • width
  • autowidth
  • height
  • shrinkToFit
  • scrollOffset-これで最高の運がありましたが、繰り返しはできませんでした。

また、基本的なグリッドcssのみを削除しました。これは、運が悪かったので、私が定めたルールだったのかもしれません。

他の誰かがこれを経験し、および/またはこれに対する解決策を見つけましたか？ヘルプは大歓迎です。

javascriptjquerycssgoogle-chromejqgrid
51
IronicMuffin

本日、Chromeをバージョン19に更新し、問題を再現し、対応するクイック＆ダーティ修正を行いました。

変更することをお勧めします 行 jqGridコード

_isSafari = $.browser.webkit || $.browser.safari ? true : false;
_

次へ

_isSafari = ($.browser.webkit || $.browser.safari) &&
    parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19
_

デモ 修正を使用します。デモで使用した_jquery.jqGrid.src.js_の修正バージョンは、 here を取得できます。

IE9（v9.0.8112.16421）、IE8（8.0.6001.18702CO）、Chrome 18.0.125.168、Chrome 19.0.1084.46、Safari 5.1.7（7534.57.2）、Firefox 12、Opera 11.62。すべてのWebブラウザで、デモには水平スクロールバーがなく、次のように表示されます。

enter image description here

将来的には、グリッドの幅の計算をより深く変更して、バージョン番号やWebブラウザから直接依存しないようにすることをお勧めします。 jqGridのいくつかの場所で、より多くのjQueryメソッド $。width および $。outerWidth を使用すれば可能になると思います。とにかく、上記の修正が多くのjqGridユーザーにとって既に役立つことを願っています。

[〜＃〜] updated [〜＃〜]：私は提案をtrirandに バグレポート として投稿しました。

UPDATED 2：正確に言うと、上記の説明と同じ_$.browser.webkit || $.browser.safari_コンストラクトが使用されるコードには3つの場所があります： setGridWidth内 、 getOffset内 、 幅の計算内multiselect列、 showHideCol内 および- setGridWidth内 。最初の3つの場所はisSafari変数を使用します。最後の2つの場所は_$.browser.webkit || $.browser.safari_を直接使用します。コードをすべての場所で置き換えます

_$.browser.webkit||$.browser.safari
_

に

_($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5
_

したがって、これを3つの場所で行う必要があります。

  1. isSafariの定義（元の投稿を参照）
  2. showHideColの内部
  3. setGridWidthの内部

修正済みの_jquery.jqGrid.src_のすべての修正を含む here をダウンロードできます。古いバージョンのjqGridを使用する必要がある場合は、_jquery.jqGrid.src_のコードで同じ変更を自分で行うことができます。本番用に最小化されたバージョンを作成するには、よく知っている任意の最小化プログラムを使用できます。たとえば、Microsoft Ajax Minifier 4.0を使用します。インストールして実行するだけです

_AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js
_

その結果、 jquery.jqGrid.min-fixed3.js になります。これは、元の_jquery.jqGrid.min.js_よりもさらに小さくなります。ファイルにコメントヘッダーを追加しても（ modified file を参照）、ファイルは元のバージョンの_jquery.jqGrid.min.js_のままになります。

バグレポート と 改善 を何度か繰り返した後、メソッドcellWidthが導入された修正版がもう1つあります。

_cellWidth : function () {
    var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),
        testCell = $testDiv.appendTo("body")
            .find("td")
            .width();
        $testDiv.remove();
        return testCell !== 5;
}
_

here を参照してください。あなたが方法に従うことを好むなら、あなたもこれをすることができます。 isSafariまたは_$.browser.webkit || $.browser.safari_（showHideColおよびsetGridWidth内）が使用されるすべての場所で、代わりに$.jgrid.cellWidth()を使用できます。

UPDATED 3：本日、jqGrid 4.3.3が公開されました。これには、上記で説明した修正（cellWidthメソッド）が含まれています。だから、私はすべて新しいバージョンを使用することをお勧めします。

更新4：Google Chrome 20はWebKit 536.11。を使用するため、jqGridの最後のバージョンを使用できないすべての人は幅の固定計算では、回答の冒頭で説明したparseFloat($.browser.version)<536.11の代わりにparseFloat($.browser.version)<536.5（またはそれに近い値）を使用する必要がありますGoogle Chrome 23 WebKit 537.11。を使用します。

63
Oleg

オレグのソリューションは私のために働いた。

最小バージョンを編集しました

49行目：

置き換えられました：

m = b.browser.webkit || b.browser.safari？！0：！1

で：

m =（b.browser.webkit || b.browser.safari）&& parseFloat（b.browser.version）<536.5？！0：！1

助けてくれてありがとう！

3
user1399332

オレグの答えは正しい。ただし、古いバージョンのjqGridを使用しており、これらの修正を適用する場合は、Githubの差分から直接変更を取得する方が簡単な場合があります。 jqGrid 4.0.0を使用してこれを正常にテストしたため、4.xシリーズのいずれでも動作すると考えられます。

最初の差分から始めて、それぞれを順番に適用してください。これにより、cellWidth関数が追加され、jquery.jqGrid.src.jsファイル全体で必要な変更がすべて行われます。縮小版を作成する場合は、Googleクロージャーコンパイラを使用できます。

多くの変更のように見えますが、実際のコードを見ると、変更は非常に迅速に進みます。わずかなソース行のみが影響を受けます。

3
Justin Ethier

Chromeベータ20.0.1132.11がリリースされ、以下を報告します。

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

数値とテキストの比較により536.11が<536.5と評価されているため、パッチが機能しなくなったのでしょうか？

助けてください！

3
johnmac

更新：私のanwswerは、数か月前にFirefoxで発生した同様の問題を参照しており、Chrome 19で動作しますが、現在はOlegの答え正しいアプローチです。

数か月前にFFで同様の問題が発生し、HScrollを完全に無効にするForceFitオプションを使用していましたが、あなたが言ったようにまだ取得するので、forcefitグリッドのHScrollを無効にしました。 FFのいくつかの更新後、それは発生しなくなりました。現在、私のグリッドはすべてChrome 18で問題ないので、19がリリースされたときに問題にならないことを願っています。

//remove HScroll
function jqGridDisableHScroll(gridid) {
    //if columns are force fit all columns will always fit on screen.
    if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
        var gridview = $('#gview_' + gridid);
        $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
    }
}

強制フィット

Trueに設定し、列の幅をサイズ変更すると、隣接する列（右側）のサイズが変更され、グリッド全体の幅が維持されます（たとえば、列2の幅を30px減らすと、列3のサイズが30px）。この場合、水平スクロールバーはありません。注：このオプションはshrinkToFitオプションと互換性がありません-つまり、shrinkToFitがfalseに設定されている場合、forceFitは無視されます。

1
Chad Ferguson

JgGrid 4.3.3を使用し、cellWidthは問題を解決しませんでした...それを解決するために、代わりにreturn parseInt(testCell) !== 5;行を追加しましたreturn testCell !== 5; in cellWidthメソッド。たぶんそれは最良の解決策ではありませんが、私たちにとってはうまくいきます:)

1
Alex Dn

これはおそらくwebkitが原因である可能性があることを指摘したいだけです issue 78412 最終的に解決されました。基本的に、境界線は考慮されません。固定レイアウトのテーブルの幅を計算するときは、パディングも同様に考えます。

これは、jqGridがテーブルの幅をコンテンツ領域の幅としてのみ誤って計算することを意味していました。したがって、境界線とパディングを削除することでも問題は解決するはずですが、おそらくそれはしたくないでしょう。

1
Nadir Muzaffar

Chrome 59.0.3071.115のjQGrid 4.5.2では、grid.base.jsのcellWidth関数を次のように変更しました。

 return Math.round(testCell) !== 5
0
alsco77