jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery の拡張 > フレックシグリッド (Flexigrid) によるグリッド操作

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

スポンサーリンク

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

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

ここでは 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>
スポンサーリンク
ホーム > jQuery の拡張 > フレックシグリッド (Flexigrid) によるグリッド操作
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門