1

「システム」と「場所」の2つの座標で「スコア」のグリッドを表現したいと思います。スコアは 0 ～ 5 の数値で、他の 2 つの座標は文字列です。

これを IE7 互換の HTML テーブルとして表現する必要がありますが、多くの問題に直面しています。

ヘッダー (「場所」) は文字列であるため、セル (数値) よりもはるかに多くの場所を占めるため、多くのスペースを失います (特に、場所の文字列がかなり長くなる可能性があるため)。だから問題があります：

ヘッダーを回転できるようにしたいと思います。

さまざまなjQueryプラグインを使用してこれを行うことができました（スクリーンショットで使用されているのはこれです）、さまざまなナビゲーターで機能しました（こちらを参照）が、IE7では機能しませんでした（こちらを参照）

jQuery を使用せずに、

フィルタ: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

テキストを回転させることはできましたが、そのコンテナーはまだ新しいサイズに適応していませんでした (こちらを参照): 幅は縮小されず、高さは増加しませんでした。したがって、これを使用して：

table tr:first-child { 高さ: 200px; }

最初の行の高さを修正しました（これは完璧ではありません。セルの内容がどれくらいの長さになるかわかりませんが、それでも...）、これはセルの幅を変更しませんでした：こちらを参照してください。これを使用して：

テーブル tr: 最初の子 td { 幅: 30px; }

何も変更しませんでした。幅は、回転前に必要な大きさのままでした。

ここで、可能な場合は高さ/幅を固定せずに（ここのように）IE7でこれを機能させる方法があるかどうかを知りたいです。また、HTML テーブル以外にデータを表現する別の方法があるかもしれません。

  • たぶん、垂直方向の凡例を含む散布図
  • jqGrid のような大きな jQuery グリッド プラグインの使用: ただし、テーブル ヘッダーを回転できるプラグインを見つける必要があります。
  • テキスト ヘッダーの代わりに PNG を使用する。ただし、テーブルに 400 を超える列がある場合、効率的でしょうか?

要約すると、ここに私の質問があります：

  • IE と互換性があり、ヘッダーを回転できる jQuery グリッド プラグインはありますか?
  • CSSまたはJavascriptを使用してIEでこれを機能させることは可能ですか?

ありがとうございました、

PS: 私の制限は IE との互換性 (少なくとも IE7、IE6 の方が優れていますが、それが不可能な場合は不可能です) であり、JavaScript の使用を避けるためではありません。できる限り使用しないようにしていますが、必要に応じてクライアント マシンで使用できるようにします。ただし、私が使用する JS ライブラリは引き続き IE7 互換である必要があります。

4

1 に答える 1

0

jQuery と RaphaelJS を使用して、最終的にやりたいことができるようになりました。

秘訣: テキストを SVG に変換して、操作を簡単にします。これはすべて JavaScript を使用して行われるため、Web ページのセマンティクスは変更されません。

方法

HTML

<table>
    <thead>
        <tr>
            <th><div id="column1"><span>aaaaaaaaaaa aaaaaaaa</span></div></th>
            <th><div id="column2"><span>bbbbbbb bbbbbbbbbbbb</span></div></th>
            <th><div id="column3"><span>ccc cccccccccccccccc</span></div></th>
            <th><div id="column4"><span>ddd ddd dddddddddddd</span></div></th>
            <th><div id="column5"><span>eee eee eee eee eee </span></div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>I</td>
            <td>II</td>
            <td>III</td>
            <td>IV</td>
            <td>V</td>
        </tr>
    </tbody>
</table>

ご覧のとおり、各列ヘッダーで、後で各列を個別に操作したい場合は、インライン スパンを使用して、毎回異なる ID を持つ div を作成します (Django では、これにオブジェクト ID を使用します)。内容とともに。

Javascript

次に、次のコードを使用します (ページの先頭にあります。

$(document).ready(function(){
$('tr th div').each(function (index, div){
R = Raphael($(div).attr('id'), 10, 200);
R.text(5, 100, $(div).find('span').text())
.rotate(-90, true);
$(div).find('span').hide();
});
});

数値 (もちろん -90 を除く) をセル サイズに適合させる必要があります。 もちろん、コードに jQuery と RaphaelJS をインポートする必要があります。jquery-1.8.2.min.js と raphael-min.js を使用しました。どちらもそれぞれのプロジェクト サイトで入手できます。

CSS

もちろん、独自の CSS を使用することもできますが、インライン テキストのテーマ設定で問題が発生した場合は、RaphaelJS の .attr(...) 関数を使用してみてください。R.text(...) 行でそれらをチェーンする必要があることを忘れないでください:

R.text(...).attr(...).attr(...).rotate(-90, true);

最終レンダリング

私はこのようなものを得ることができました:

最終レンダリング
(出典: ompldr.org )

次のステップ

次のステップは、セルの内容を下に揃えられるようにすることです。ここを参照してください。

于 2012-10-18T10:25:41.783 に答える