動作サンプル - 既存テーブルにFlexigridを組み込む

jQuery 1.2.6とFlexigridを用意し、実際にテーブルリストに組み込んで使ってみた。ここでのWebブラウザ実行環境は次のとおり。

  • Microsoft Windows XP SP2 / Microsoft Internet Explorer 7
  • FreeBSD 8-current / Mozilla Firefox 2

まずは既存のテーブルに対して組み込んでみる。ベースとなるHTMLソースコードとWebブラウザでの実行結果は次のとおり。

base_table.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ベースとなるテーブル</title>
</head>

<body>

<table id="zip_list">
    <thead>
        <tr>
            <th width="50">郵便番号</th>
            <th width="70">都道府県名</th>
            <th width="70">市区名</th>
            <th width="150">地名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>150-0002</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>渋谷</td>
        </tr>
        <tr>
            <td>150-0013</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>恵比寿（次のビルを除く）</td>
        </tr>
        <tr>
            <td>150-0034</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>代官山町</td>
        </tr>
    </tbody>
</table>

</body>
</html>

図1: Windows XP SP2 / Internet Explorer 7でアクセス

上記に対して、Flexigridを組み込んでみる。各種スタイルシートとJavaScriptファイルを読み込み、JavaScriptコードを数行追記する。

table_with_flexigrid.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テーブル+Flexigrid</title>

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./css/flexigrid.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="./js/flexigrid.js"></script>

<script type="text/javascript">
<!--
$(document).ready(function() 
{
    $('#zip_list').flexigrid();
}
);
-->
</script>

</head>

<body>

<table id="zip_list">
    <thead>
        <tr>
            <th width="50">郵便番号</th>
            <th width="70">都道府県名</th>
            <th width="70">市区名</th>
            <th width="150">地名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>150-0002</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>渋谷</td>
        </tr>
        <tr>
            <td>150-0013</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>恵比寿（次のビルを除く）</td>
        </tr>
        <tr>
            <td>150-0034</td>
            <td>東京都</td>
            <td>渋谷区</td>
            <td>代官山町</td>
        </tr>
    </tbody>
</table>

</body>
</html>

図2: Windows XP SP2 / Internet Explorer 7でアクセス。テーブル/カラムサイズの伸縮、カラム別の表示切替が可能

図3: FreeBSD 8-current / Firefox 2でアクセス。こちらも問題なく動作する

日本語も問題なく表示できる。Internet Explorer 7では、thにwidthを指定しないとうまく動作しないので注意が必要だ。

たったこれだけのコードを追加するだけで、表やカラムサイズの伸縮を行えるようになるのは魅力的だ。続いては、ソートやページャといった、Webアプリケーションの一覧画面では必須と言える機能の動作サンプルを紹介する。