2012-05-01 4 views
2

簡単なソート/フィルタリングシステムが必要な大きな表データの作業中に、アイソトープライブラリが発見されました。機能性。 Isotopeを使用してテーブルの行をソートしてフィルタ処理することができるようにしたいと思います。動作するように見える基本的なデモを思いつきました。しかし、いくつかのバグが存在する:jQueryアイソトープライブラリ(HTMLテーブルあり)

  • Iのフィルタと、行ヘッダーの<THEAD>セクションを使用しているので、私は<TBODY>に同位体セレクタを適用しています。ただし、コンテナとしてtbodyを使用してIsotopeを初期化すると、各行の表のセルは表の書式設定によって割り当てられた幅を失います。必要な場合は列の幅を手動で設定できるので、これは大きな問題ではありませんが、現在の状況では面倒です。
  • 行は、表のコンテナ要素の左上の表の外側に配置されます。 tbody要素の相対位置は、通常のdivの場合と同じように、行の絶対位置スタイル規則(アイソトープによって自動的に適用されます)に影響しないようです。通常、絶対配置は絶対位置または相対位置のどちらかを使用して配置された場合はそのコンテナ要素に相対的ですが、ここではそうではありません。

表の行は適切にフィルタリングされており、アイソトープライブラリはこれらの例外を適切にアニメーションとスタイリングに適用しています。可能であれば、このページを管理している人はCMSを使っているので、HTMLやCMSを使ってHTMLを一貫して生成するためのHTMLやWYSIWYGエディタについては十分に分かっていないので、テーブルを使いたいと思っていますかなり基本的な表を超えた構造。誰もこれらの2つの問題を修正するためのアドバイスを持っていますか?ありがとう!

編集:補足として、私は最初の問題を解決しました。 tbody要素は、相対または位置:絶対属性なので、テーブル行が適切に配置されていないため、位置を受け付けません。テーブル全体をposition:relativeに設定すると、メインの配置上の問題は解決されましたが、行はテーブルの左上に移動しました。私はJavascriptが表示されていないので、テーブルの行のトップアトリビュートをJavascriptのtheadエレメントの高さでオフセットすることでこの問題を解決しました。

これは、Firefox、Chrome、Opera、Safariでうまく動作します。しかし、IE 7,8,9はすべてレンダリングの問題があります。さらに悪いことに、レンダリングの問題はすべて異なります。 IE9はテーブルセルを正しいオフセットに置くことを拒否し、IE8は行をまったく表示せず、IE7は状況全体を「解読」と解釈しているようです。少なくとも私が遭遇した主な問題は解決されました!

+0

デモへのリンクを提供したり、[jsFiddle](http://jsfiddle.net/)のようにいくつかのサンプルコードをアクセス可能な場所に置くことはできますか? –

+0

確かに!問題のページは現在、メインサイトの開発/テストのセクションにあり、[ここ](http://www.mnu.edu/for-faculty-a-staff/editing-the-mnu-website)にあります。 /testing.html)。 問題のコードを含むJavascriptファイルは[isotope-sorttable.js]です(http://www.mnu。edu/templates/mnu_global/isotope-sorttable.js)、CSSは[mnu_global.css](http://www.mnu.edu/templates/mnu_global/global.css)の一番下にあります。 –

答えて

2

私は、アイソトープをテーブルソートに使用するjQueryプラグインであるIsortopeを実装するためのWesleyのスタイル提案を統合しました。

テーブルの生成された列幅を自動的にインラインスタイルに変換することで、列幅の問題などを解決します。そうすれば、最終的なテーブルは最初のテーブルのように表示されます。

簡易demo here

Download here

関連する問題