簡単な並べ替え/フィルタリング システムが必要な表形式のデータの大規模なリストに取り組んでいるときに、Isotope ライブラリを発見しました。これはまさに私が望んでいることを実行しているようで、多くの優れたビジュアルと機能を提供します。Isotope を使用してテーブルの行を並べ替えたりフィルター処理したりできるようにしたいと考えており、動作するように思われる基本的なデモを作成しました。ただし、いくつかのバグが存在します。
- フィルターと行ヘッダーに <thead> セクションを使用しているので、Isotope セレクターを <tbody> に適用しています。ただし、Isotope が tbody をコンテナーとして初期化されると、各行の表のセルは、表の書式設定によって割り当てられた幅を失います。必要に応じて列幅を手動で設定できるので、これは大したことではありませんが、現在のコンテキストではかなり面倒です。
- 行は、テーブルのコンテナ要素の左上で、テーブルの外側に配置されます。tbody 要素の相対位置は、通常の div の場合のように、行の絶対位置スタイル ルール (Isotope によって自動的に適用される) には影響しないようです。通常、コンテナが絶対配置または相対配置を使用して配置されている場合、絶対配置はそのコンテナ要素に対して相対的になりますが、ここではそうではないようです。
表の行は適切にフィルタリングされており、Isotope ライブラリはこれらの例外を除いてアニメーションとスタイルを適切に適用しています。このページを維持する人々は CMS を介してこのページを維持する予定であり、HTML や、CMS が一貫して HTML を生成するために使用する WYSIWYG エディターについて十分に知らないため、可能な限りテーブルの使用を維持したいと考えています。かなり基本的なテーブルを超えた構造。これら2つの問題を修正するためのアドバイスはありますか? ありがとう！
編集：補遺として、私が抱えていた最初の問題を解決しました。tbody 要素が position: relative または position: absolute 属性を受け入れないことが判明したため、テーブルの行が適切に配置されていませんでした。テーブル全体を position: relative に設定すると、主な配置の問題が解決されましたが、行はテーブルの左上に移動されました。Javascriptなしで表示が正常であるため、Javascriptのtad要素の高さで表の行の上部属性をオフセットすることで、この問題を解決しました。
これは、Firefox、Chrome、Opera、および Safari で美しく機能します。ただし、IE 7、8、および 9 にはすべてレンダリングの問題があり、さらに悪いことに、それらはすべて異なるレンダリングの問題です。IE9 は表のセルを正しいオフセットで配置することを拒否し、IE8 は行をまったく表示せず、IE7 は状況全体を「爆発!」を意味すると解釈するようです。少なくとも、私が遭遇した主な問題は解決されました!