Flexigrid

Flexigrid

Flexigridは、Paulo P.Marinas氏が書いたJQueryのプラグインで、非常に高機能で美麗なテーブルをHTML上に表示するものだ。
さすがにインプレイス編集まではサポートしていないようだが(※1)、Visual StudioのDataGridViewで作ったデータナビゲーション・ビューのような、かなり綺麗なテーブルになる。

また、扱いもjQueryのプラグインらしく非常に簡単であり、XMLやJSONデータをデータソースとして扱えるのは当たり前としても、例えば以下のように全く事前の設定無くtableタグを指定するだけで、FlexiGridの表示を行える。

<div class="code">
    <pre>$('.flexme').flexigrid();</pre>
</div>
<table class="flexme">
    <thead>
            <tr>
                <th width="100">Col 1</th>
                <th width="100">Col 2</th>
                <th width="100">Col 3 is a long header name</th>
                <th width="300">Col 4</th>
            </tr>
    </thead>
    <tbody>
            <tr>
                <td>This is data 1 with overflowing content</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            :
            :
            <tr>
                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            
    </tbody>
</table>

昔、似たようなテーブルを全て素のJavaScriptとビヘイビアで書いたことがあるが、大変だったのが嘘のようだ。

ただし、CSSとスクリプトで実現したこのようなテーブルの常として、大量のデータを流し込んだ場合は、PCのスペックによって入力や再描画の応答にかなりの差が出る。実際、自宅のPCではカラムの再描画がワンテンポ遅れて開始するが、これは仕方の無い所だろう。

※1 まだ詳しく調べていないので推測でしかない。