フレックシグリッド (Flexigrid) によるグリッド操作

Flexigrid は Paulo P. Marinas 氏によって開発されているグリッドライブラリです。 MIT ライセンスで配布されています。

Flexigrid を利用するとデータのソート、フィルター、カラム・テーブルのリサイズ、ページネーションなどを簡単にできるようになります。

ここでは Flexigrid の基本的な使い方と、少し発展的な利用方法について説明します。

少し発展的な話題はこちら:

• FlexiGrid - AJAX でデータ取得
• FlexiGrid - 行のカスタマイズ

基本的な使い方

Flexigrid の入手方法と設定方法

Flexigrid は Flexigrid のサイトから無償でダウンロード可能です (MIT ライセンス)。

flexigrid-<バージョン>.zip をダウンロードしてきて展開すると js と css というフォルダーがあります。 この中の css/flexigrid.pack.css、css/images/以下すべて、js/flexigrid.pack.js を配置して、 flexigrid.pack.css と flexigrid.pack.js を HTML から取り込めば OK です。

#その他もちろん jQuery も必要です。

基本的な動作確認

下記の HTML に対して $('#grid1').flexigrid(); としてグリッドが表示されれば OK です。

<table id="grid1">
<thead>
	<tr><th width="50">コード</th><th width="150">名称</th></tr>
</thead>
<tbody>
	<tr><td>CA</td><td>カリフォルニア</td></tr>
	<tr><td>WA</td><td>ワシントン</td></tr>
	<tr><td>TX</td><td>テキサス</td></tr>
</tbody>
</table>