テーブルを操作するjQueryプラグイン

CodeZine / 2012年7月3日 14時0分

図8 tableHoverプラグイン適用後(クリック時)

 本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとjQueryプラグインをサンプルを交えて紹介していきます。今回は、テーブル操作をテーマにしたjQueryプラグインを紹介します。

■はじめに

 今回は、テーブルの見栄えを良くしたり、様々な機能を簡単に追加したりできるjQueryプラグインを解説します(表1)。

表1 紹介するjQueryプラグイン
名前 概要 jquery.columnfilters 表に検索用フォームを設けて、フォームに文字や数字を入れると特定の行のみ表示できる jquery.csv2table.js csvファイルを読み込みHTMLのテーブルに変換でき、ソートや着色などができる tableHover 表にカーソルを重ねたりクリックしたりした際、行や列の色を変えられる
■対象読者

jQueryプラグインに興味があり、使ってみたい方 ■必要な環境と準備

 執筆時点のjQueryの最新版は、1.7.2です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。

 サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、使用するプラグイン関連のファイルはここにまとめて配置し、説明を進めます。また、scriptsフォルダにはjQuery本体を配置しておきます。なお、今回紹介する「jquery.csv2table.js」プラグインは「img」フォルダ内のgifファイルや「data」フォルダ内のcsvファイルを読み込む設定のため、「img」フォルダを設けてそこにgifファイルを、「data」フォルダを設けてそこにcsvファイルを配置してあります。

■フィルタ機能付きテーブルを作成する - jquery.columnfiltersプラグイン

 jquery.columnfiltersプラグインは、表に検索用のフォームを設けて、フォームに文字や数字を入れると、その文字/数字から始まる特定の列のみを表示できるプラグインです。表にフォームが表示されている状態を図1に示します。

●jquery.columnfiltersプラグインを使ったサンプルの実行例

図1 jquery.columnfiltersプラグイン適用後


 続いてフォームに文字を入れて、その文字から始まる行のみを表示した状態を図2に示します。Aの項目でSから始まる言葉がある行のみが表示されていることが分かります。

図2 jquery.columnfiltersプラグイン検索処理後


 また、検索の際には「*」をワイルドカードとして機能させることができます。Dの項目で0を含む数字がある行のみを表示した状態を図3に示します。

図3 jquery.columnfiltersプラグインワイルドカード検索処理後


●jquery.columnfiltersプラグインの使い方

 使用方法は、jquery.columnfiltersプラグインのサイト上の「Download the source」から「columnfilters.zip」というファイルをダウンロードして保存し、解凍後、ソースデータ「jquery.columnfilters.js」を「plugins」フォルダ下に配置します。

 リスト1にjquery.columnfiltersプラグインの使用例を示します。

リスト1 jquery.columnfiltersプラグインの使用例(jquery_columnfilters.html)
<!DOCTYPE html> <html> <head> <meta charset=UTF-8" /> <title>jQueryプラグイン(jquery.columnfilters.js) サンプル</title> <!--1.jQueryの読み込み--> <script type="text/javascript" src="./Scripts/jquery-1.7.2.min.js"></script> <!--2.プラグインの読み込み--> <script type="text/javascript" src="./plugins/jquery.columnfilters.js" charset="utf-8"></script> <!--3.プラグインの設定--> <script type="text/javascript"> $(document).ready(function(){ $('table#book1').columnFilters({alternateRowClassNames:['rowa','rowb'] }); }); </script> <!--4.CSSの設定--> <style type="text/css"> thead{background-color: #bbb;} table{background-color: #DCDCDC;} td{text-align:center;} table tr.rowb{background-color:#EAf2FD;} table tr.filterColumns td{padding:2px;} body{padding-bottom:150px;} </style> </head> <body> <h1>jQueryプラグイン(jquery.columnfilters.js) サンプル</h1> <!--5.テーブルの設定--> <table id="book1"> <thead> <tr><th>No.</th><th>A</th><th>B</th><th>C</th> </thead> <tbody> <tr><td>1</td><td>Yamada</td><td>abc</td><td>012</td> <tr><td>2</td><td>Suzuki</td><td>cba</td><td>345</td> <tr><td>3</td><td>Tanaka</td><td>xyz</td><td>678</td> <tr><td>4</td><td>Sasaki</td><td>zyx</td><td>901</td> </tbody> </table> </body> </html>
 「3.プラグインの設定」では、「$(document).ready(function(){});」の中でjQueryメソッドとしてjquery.columnfiltersプラグインを機能させます。セレクター部分に「table#id名」といった形でテーブルのid名(このスクリプトではbook1)を設定することが重要です。そして、メソッド部分に「columnFilters」を設定しています。

 このスクリプトでは行ごとを違う色に見せるため、「.columnFilters();」の括弧内に「{alternateRowClassNames:['rowa','rowb']}」と記述し、奇数行を「rowa」、偶数行を「rowb」と設定し、この後の「4.cssの設定」で「rowb」の色を別に設定しています。設定オプションの一つである「alternateRowClassNames」については後述します。

 あとは、このプラグインを機能させたい表に「3.プラグインの設定」で設定したid名を付与するだけで、検索窓付きの表が完成します。

●オプションによる様々な検索

 検索オプションとしては以下のものがあります。

表2 検索オプション
検索窓に入れる記号 名前 概要 * wildcard *の後に入力した文字を含む行のみを表示(通常の場合文字を入力すると、その文字から始まる行のみを表示) ! notcharacter !の後に入力した文字から始まらない行のみを表示
 これらの検索オプションは「.columnFilter();」の括弧内で

$(document).ready(function() { $('table#id名').columnFilters({wildCard:'#',notCharacter:'?'}); });
 と設定すると、wildcardとして使用する文字を*から#に、notcharacterで使用する文字を!から?に、といった形で変更できます。

●多彩な設定オプション

 また、様々な設定オプションも用意されています。

表3 設定オプション
オプション名 既定値 概要 caseSensitive false 大文字・小文字を区別するか minSearchCharacters 1 何文字入力されたら検索を実施するか excludeColumns [] 検索窓を設けない列(列番号を配列で指定) alternateRowClassNames [] 交互の行にスタイルクラスを割り当てる(任意のスタイルクラスを設定可能)
 これらも例えばcaseSensitiveをtrueにして大文字・小文字まで正確に入力を促す場合は「.columnFilters();」の括弧内で変更可能であり、以下のように変更します。

$(document).ready(function() { $('table#id名').columnFilters({ caseSensitive:true }); });


■関連記事
Windows Azure for Node.jsでAzureストレージを扱おう
テーブルを操作するjQueryプラグイン
Windows AzureユーザーのためのNode.js HTTPモジュールの基礎
CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(4)
CoffeeScriptベストプラクティス集 ブラウザ向けJavaScript編(3)

■記事全文へ

CodeZine

トピックスRSS

ランキング