jquery - 無料のjqgridで一番右の位置にスクロールした場合、ヘッダーと列の区切り線を同期する方法

Question

jqgrid を右端までスクロールすると、列の区切り線が外れます。

再現するには、jqgrid をブラウザ ウィンドウよりも広くするか、ブラウザ ウィンドウの幅を狭くして、水平スクロール バーが表示され、水平方向に右端までスクロールします。ヘッダーと列区切りの垂直線の位置が異なります。

これを修正するには？

Answer 1

長いコードがあります。誰かがあなたのコードをデバッグすることは、stackoverflow の目的ではありません。問題を再現する小さなデモを用意していただけますか?

コードをデバッグしたところ、最初の読み込み時にグリッドに水平バーがないことがわかりました。無料のjqGridには、データがロードされた後にグリッドに水平バーが含まれているかどうかの検出が含まれています。padding-righthbox ( の子でhdivあり、 class を持つdiv ui-jqgrid-hbox) をスクロール バーの幅に設定します (コードの行とこのbDiv.offsetWidth - bDiv.clientWidth行を参照)。

グリッドの [グリッドの再読み込み] ボタンをクリックすると、スクロール バーの問題が修正されます。したがって、データがロードされた後にページにいくつかの変更を加えると思います。その結果、グリッドに水平スクロール バーが表示されます。jqGrid は変更を検出しないため、問題が存在します。

できることは、水平スクロールバーを作成するページに不明確な変更を加えた後、fixScrollOffsetAndhBoxPaddingメソッドを手動で呼び出すことです。たとえば、グリッドの幅を変更するだけかもしれません (おそらく によって)。$grid.jqGrid('setGridWidth', $('#grid1container').width(), false);

あなたができることは、呼び出しを含めることだけです

$grid[0].fixScrollOffsetAndhBoxPadding();

グリッドのスクロールバーが作成された後のどこかに。はfixScrollOffsetAndhBoxPadding公開されており、グリッドの DOM のメンバーです (行を参照)。上記のコードは機能するはずです。

デバッガーのコンソールでこの行を実行する$("#grid")[0].fixScrollOffsetAndhBoxPadding();と、問題が解決することがわかります。