スクロールを監視するためにlayuiテーブルの固定列を有効にする方法の紹介

現在、テーブルのスクロール可能な領域はlayMain領域です。ヘッダーと固定列が連動してスクロールします。実際には、左右の固定列には独自のスタイルのオーバーフローがあります。つまり、マウスを左右の固定列に移動してもスクロールできません。たとえば、次のレンダリング

#もちろんそうではありません 1 つまたは 2 つのスタイルで実行できますが、それ以外の場合は投稿全体を作成する必要はありません。layui テーブルの実装方法、特にテーブルのヘッダーを固定し、左右の列、基本的にCSSを1つか2つ追加するだけでは処理できません。

推奨事項:

layui フレームワークのクイック スタート

現在、いくつかの手順があります:

最初のステップは、特定の時間に実行することです。ユーザーのマウスによるスクロール操作を監視できるように、固定列領域の下の tbody をスクロール可能にする必要があります。

これは通常、CSS ホバーを使用して行うことができます

ただし、これは始まりの始まりにすぎず、いくつかの補助的な処理が必要です。そうしないと、結果は次のようになります。

#補助的な処理については、これは最初に行う必要があります。次の表の現在の固定列のスタイルの一部を理解します。たとえば、スクロール バーがある場合、スクロール バーの幅が計算され、固定列の右側が取得されます。この値に基づく値。スクロール バーの幅によって異なります。

コンテンツが小さくてスクロールしない場合、その右は -1 であるため、一般的に言えば、ホバー時にコンテンツ コンテナのスクロール バーと重なるように右を 0 にする必要があります。何も変わっていないように見えますが、実際には固定列である tbody にもスクロールのサポートが追加されています。ここに直接ホバーすることはできません、ちょうどいいです: 0、上 とはいえ、スクロールが必要ないときは元々-1なので、いつホバーしても0だとスクロールが不要なときに異常ジャンプしてしまいます. では、このマークはどこから来たのでしょうか?これは、マウスが移動したときに js イベントを使用して決定されます。必要に応じて、次のようにマークします:

通常、ここでスクロールできます。効果は次のとおりです:

2 番目のステップ、次に重要なことは、実際のコンテンツとの同期スクロールを処理することです。

一般的に言えば、スクロールを監視してから、 layMain はスクロールに追従しますが、!実際の状況は決して単純ではありません。元のlayMainのスクロールイベントがすでに固定列をスクロールするように同期しており、このスクロールによって固定列に追加したスクロールリスナーもトリガーされるためです。

次に、1212121212121212.... このサイクルが続きます。もちろん、スクロールは改善され、無限ループに陥ることはありません。スクロールする位置が存在しないことが判明すると、停止します。ローリングは同じですが、ローリングによって相手が変化し、今度は相手が自分の側に影響を与えるため、より遅い速度になります。 それでは、どう対処するかというと、やはり前のルーチンで、特殊な状況下でフラグを立てて、そのフラグを使って固定列スクロール監視に従って相手を同期するかどうかを判断し、逆にlayMainのスクロール 同期の状況にもよりますが、おおよそのコードは以下の通りです

最終的な効果:

3 番目のステップは、左固定を処理することです。 関連スタイル

追跡は、マウスがホバリングしていない場合、つまり、左側にあるマウスが見えない場合と同じであるため、スクロール バーですが、マウスのスクロールを監視できます。いくつかの特別な処理が行われています:

スタイル

効果:

最後の変更は、理解度によって異なります。スクロール バーを表示してもよいと思われる場合は、この最後の手順を削除してください。

テスト ページ: https://sun_zoro. gitee.io/layuitableplug/testTableCheckboxDisabled

注: 上記のコードの insObj は、返されたオブジェクトではなく、table.render 内の新しいテーブル インスタンスであるため、上記のコードは tablePlug 内で有効です。このプラグインを使用したくないが、使用する必要がある場合は、上記ロジックを参考に、insObj.layMain等を該当テーブルのjqueryオブジェクトに置き換えることができます。

tablePlugv0.1.6 のバージョンでは、この部分のロジックの一部が微調整されており、主にイベント委任で使用できるものの一部を実装しており、その一部は次のもので置き換えることができます。その他のセレクター: hover. mark クラスのフォームをマークする必要はありません. 修正は次のとおりです:

以前の固定カラム本体のマウスの出入りのイベント処理を削除し、

代わりにイベント委任メソッドを使用します:

共同スクロールする場合、前のマークの代わりにホバーの形式が使用されるため、このマークを追加および削除する必要がなくなります。最終的な効果は同じです

以上がスクロールを監視するためにlayuiテーブルの固定列を有効にする方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。