レイウイテーブル反転の簡単な実装

#テーブルの反転、つまり行と列の変換は、おそらく誰にとっても馴染みのあるものです。まずレンダリングを見てみましょう:

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

タイトルにある単純な実装方法と比較して、列と行の変換のためのテーブルの実装方法も以前に検討しました。おそらく、主なアイデアは、元のテーブル定義は変更されずに残り、データ レコードが列構成として使用されるため、データを通じて新しい列構成を再生成するということです。

次に、元の列構成を結合して新しい最終データと新しい列構成を生成し、最後にテーブル内のレンダリングを使用してそれらをレンダリングします。基本的に、実際に行われることは、js が設定とデータを結合し、反転してレンダリングすることですが、理論的には実現可能ですが、実際に実装するのは困難です。

よく考えてみると、それほど複雑である必要はありません。スタイル コントロールを使用してテーブルを反転することもできます。ただし、layui のテーブル ビューの全体構造はより複雑で、いくつかの部分で構成されています。もちろん、簡単さは相対的なものであり、この方法にはいくつかの欠点もありますが、それについては後で説明します。

最初に実装のアイデアを見てみましょう:

最初で最も重要なことはスタイルです。最も重要なことは、この基礎となる書き込みモードの使用です。現在のおおよそのスタイルは次のとおりです:

主なことは、垂直クラスが .layui-table-view に追加されると、書き込み順序が変更され、その後、対応するスタイルが変更されることです。以下に、layui テーブルのさまざまな部分の処理が追加されます。

スタイルを追加した後、基本的な外観は完成しましたが、まだ洗練する必要があります。

主に、たとえば、合計統計部分を右側に取得する必要がありますが、そうではありません。ボックス内に属します。そのため、上部の設定は非常に手間がかかります。スタイルを使用しようとしましたが無駄でした。最終的に、ヘッダー ツールバーの高さに基づいて上部を設定する js を使用することに切り替えました。

もう1つは、元の表のヘッダーと統計行を縦に並べて左右の列に分ける方法ですが、これだとどうしてもコンテンツの表示範囲に影響が出てしまい、スタイルが適切に処理されないため、こちらも行います。 js を動的に使用し、メイン部分のマージン値を次のように調整します:

上記のコードは、実際にはビュー コンテナーの垂直スタイルを切り替えてから、いくつかのコンテナーのスタイルを調整するだけです。基本的に、これら 2 つの部分で達成できる基本的なオリジナルの効果は存在しますが、実際の詳細はまだ多く、コメントには、これは暫定的な実装にすぎず、後でカプセル化プロセスがあるとも記載されています。

最終的にボタンを 2 つ使用することにし、監視プロセスを 2 つ記述した理由は、主に理解を容易にするためであり、また、プラグイン全体を使用したくないが個別に使用したい友人がいる場合に備えて、元の実装は、独自のプロジェクトに適したメソッドをカプセル化します。

プラグイン全体によって最後に生成されたものに基づく現在のカプセル化されたメソッド呼び出しは次のとおりです:

正確に行われる処理:

コードの一般的な意味は、すべてのテーブルまたは単一のテーブルを変換でき、2 番目のパラメータの反転に従って、渡されない場合は逆の効果が得られます。ブール値が渡された場合は、実際の値が優先されます。true: reverse です。 false: 逆にしない、最後の呼び出しです。これは table.Class

の拡張メソッド逆です。次のステップでは、いくつかの詳細に対処し、これまでに遭遇したことのないいくつかの問題も引き起こします。

1 つ目は、反転効果を更新する必要がある場合のサイズ変更時です。その理由は、一部のスタイルは js を使用して設定されており、ヘッダー ツールバーの実際の高さは制限されていないため、変更される可能性があります。 , したがって、以前のトップセットを変更する場合は不適切です。

現在の処理は、リサイズ時に適宜再調整するというものですが、後から最適化計画があり、純粋なCSS処理に調整する場合は、この手順は省略できます。

#もう 1 つの詳細は、初期化中に元に戻すことができるかということです。これは通常は問題ありません。パラメータによって状態が決定され、レンダリングが完了したら、インスタンスの逆を呼び出してそれを処理します。もちろん、この新しく追加された属性についてはさらに詳細があり、再リクエスト可能である必要があります。スマート オーバーロード カテゴリに属する​​属性なので、処理の追加にも注意する必要があります:

done process

インテリジェントなリロード構成処理:

結果:

爆発するもう 1 つの問題は、現在、チェックボックスがたまたま固定列である場合、実際にはテーブル内に 2 つの列があります: チェックボックス、1 つは固定列、もう 1 つはメインですが、クリックしても、もう一方の双子の兄弟またはシャドウは同期されません。

行と列が変換された後、実際の固定列は非表示になるためです。このとき、操作はメインです。操作が別の状態に戻った後、いくつかの「異常」が表示されます。すべてを選択すると、独自のレイフィルターがあり、form.on を使用して次のように監視および処理できます:

これは table.on と競合しません。

を使用します。より厄介なのは次のシングルです生成時に選択されたものにレイフィルターが追加されていませんでした。今回は良いことです、モニターはそれらを検出できません。しかし、方法は人々が考えるものなので、もしこれは利用できません。動的に追加するだけなので、次の処理があります

イベント処理と連携します:

layui フレームワークの詳細については、## に注意してください。 #layui フレームワークのクイック スタート。

以上がレイウイテーブル反転の簡単な実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。