Flexigrid

概要

Flexigrid は jQuery のプラグインです。
Flexigrid を使うことにより、簡単な JavaScript コードを書くだけでテーブルに対して様々な UI を付加することができます。
例えば、各列のサイズ変更、表示／非表示、ストライプ表示、列の入れ換え、スクロールバー等々です。
さらに、Ajax を使うことにより、ページ単位での表示、ソート、検索等の機能に対応することも可能です。

インストール

公式サイトからアーカイブを取得し、展開します。

 % unzip flexigrid.zip

展開して出来た flexigrid ディレクトリ直下の flexigrid.js が Flexigrid プラグインの本体となります。
また、css/ 以下のファイルが、スタイルシートと画像になりますので、これらを適当な場所にコピーすればＯＫです。

使用方法

以下、簡単な使用例です。

 <link rel="stylesheet" type="text/css" href="/css/flexigrid.css">
 <script type="text/javascript" src="/js/jquery.js"></script>
 <script type="text/javascript" src="/js/flexigrid.js"></script>
 
 ...
 
 <table id="test">
  <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>
 
 ...
 
  <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>
 </table>
 
 <script type="text/javascript">
 <!--
 $(document).ready(function()
 {
    $('#test').flexigrid(
      {
        height: 800,
        width: 'auto',
        striped:  false,
      }
    );
 }
 );
 -->
 </script>

主な設定項目は以下の通り。

補足

height:auto とすると、列の表示／非表示時のポップアップがおかしくなる。バグ？