それにしてもIEの使えなっぷりが凄い．IE6〜9全てで動作が異なる．
IE8なんか機能を削ったくせにcssへの対応が中途半端で制限が大きすぎるし，あろうことかIE9ですら対処不能っぽい不具合があるし．それにしてもコードの修正を行うのにubuntu→windows xp→windows 7間をいったり来たりするのがすこぶるめんどくさい…
※2011/02/10更新
- 機能
- テーブルのレイアウトを（ほぼ）損なうことなくスクロール機能を追加することが出来る.
- ヘッダ（thead）フッタ（tfoot）の位置及び任意の左列，右列の位置を固定することが出来る．
- テーブルの構造が維持されるため，内部にform部品が含まれていても動作する可能性が高い．
- 対応ブラウザ
- firefox,opera,chrome,safari(なるべく新しいもの)
- internet exproler6,7,8
- internet exproler9（一部不具合有り）
- 使い方
- 下記リンクからスクリプトファイルを取得し，jQuery.jsと共にhtmlドキュメントに読み込む．
利用したバージョン:jQuery1.7.1 - 機能を追加したいテーブルには予めスタイルシートに依るデザインを施しておく．
要素に直接スタイルを指定している場合は正しく動作しない可能性があります．
（表示された内容でレイアウトを操作するのでwhite-space:nowrapを設定するなり，予め見た目を固定しておいて下さい.） - スクリプト内部で下記を指定する．（table_aは機能を追加したいテーブルのid）
$("#table_a").scrollable(400, 200, 2, 1);
引数1：テーブルの表示幅
引数2：テーブルの表示高
引数3：固定したい左列数
引数4：固定したい右列数 - 行の追加・削除等を行った場合は再度scrollableを指定して下さい．
- 注意事項
- 対象となるテーブルに余りにも複雑なスタイルシートが設定されていた場合は正しく動作するか不明．
- colspan,rowspanが指定されたテーブルには対応していない．
- tr要素は必ずthead,tbody,tfoot要素に含まれるようにして下さい．
- scrollableを指定したテーブルは内部のthead,tbody,tfootの格納順が変化するのでそれに依存したコードは動作しなくなる可能性がある（ie以外）．
- tbody部の列の高さは1行目の高さに合わせられる．（処理速度の問題）（ie以外）
- vartical-align設定は無視され，全てのセルが上詰めとなる．
- 位置の固定を全てjavascriptにて制御しているため，配色・ブラウザ等の環境によってはスクロール時に描画がもたつく・ちらつく場合がある．（汎用性とのトレードオフと考えて下さい）
- 列固定処理はデータ行数がかさむと非常に処理が重くなるので注意． （table要素の構成上セル毎の位置をずらしている為．極力軽くなるように努力したんだけれど）
- 既知の問題
- ie9においてtableのborderWidthが引き継がれないケースがある．これは当プラグインの不具合ではなくie9のバグと思われるので，適宜外側のdiv要素の見た目を変更してください．（幅と高さをborder分縮める＋borderWidthの再設定）
- 技術的解説
- scrollableを実行すると、head要素にstyle要素が追加される．
- このstyle要素には対象tableの内容を全てブロック要素（display:block）化し，表示位置の指定が可能な形態にするcssが記述されている．
- table要素のスクロールイベントにヘッダ・フッタ・列の位置をスクロール位置に応じてスライドさせる処理を記述．
- ie6〜ie9においては完全な独自実装.th,tdにposition:relativeを設定した際の挙動を利用.（cssの標準動作ではない点に注意）
なおie8ではtd,thにposition:relativeを指定した際のbackground-colorとborderのレンダリング順が他のieと異なるため，補助的なdiv要素を使って見た目を補完している． - ie9の不具合の原因はHTMLTableElement.styleのborderWidth関連のプロパティが全く取得できない事に依る．（当方の環境だけ？）
ソースはこちら:scrollableTable.js
※本コードの利用・改変については自由に行って構わないけれども,使用したことによる苦情・トラブルについては一切受け付けない.またバグ・動作不良があったとしても作者は関知しないこととします.
投稿
0 件のコメント:
コメントを投稿