csv形式の表を読み込み、ソート可能なテーブルとして表示できる - jquery.csv2table.jsプラグイン
jquery.csv2table.jsプラグインは、Excelなどcsv形式で用意したデータをhtmlのテーブルに変換して表示するためのプラグインです。このプラグインを使うことによって、単純にcsv形式で用意したデータをhtml表示させることができるだけでなく、項目ごとにソートができるなど、見栄えの良い表を表示できます。
jquery.csv2table.jsプラグインを使ったサンプルの実行例
jquery.csv2table.jsプラグイン適用後を図4、図5に示します。図4は表を表示したところ、図5は列Bでソートをかけたところです。
jquery.csv2table.jsプラグインの使い方
jquery.csv2table.jsのサイト上の「Source」というリンクから「jquery.csv2table-0.02-b-2.8.js」をダウンロードして保存し、「plugins」フォルダ下に配置します。なお、プラグインのソースを見ると「http://jsgt.org/lib/jquery/plugin/csv2table/v002/img」フォルダ直下にあるgifファイル4つ「icon-loadinfo.gif」「icon-n.gif」「icon-d-green.gif」「icon-a-green.gif」を読み込む設定になっているので、このフォルダ配下の4つのgifファイルもダウンロードして保存し、「img」フォルダ下に配置します。
リスト2にjquery.csv2table.jsプラグインの使用例を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（jquery.csv2table.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.csv2table-0.02-b-2.8.js" charset="utf-8"></script>
</head>
<body>
<h1>jQueryプラグイン（jquery.csv2table.js) サンプル</h1>
<!--3.プラグインの設定-->
<div id="view0"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#view0').csv2table('./data/Book1.csv');
});
</script>
</body>
</html>
「3.プラグインの設定」のように、「$(document).ready(function(){});」の中でjQueryメソッドとしてjquery.csv2table.jsプラグインを機能させます。セレクター部分に表のidを定義して「.csv2table();」の括弧内にcsv形式ファイルのパスを指定するだけで、csv形式ファイルをソート可能なHTMLのテーブルとして表示してくれる非常にシンプルな構成となっています。
多彩な表示オプション
また、このプラグインは非常に多彩なオプションにより、特定の行や列に色をつけるなど表の見栄えを良くすることができます。オプションの一部を表4に示します。
| オプション名 | 既定値 | 概要 |
| sortable | true | 値falseを設定するとソートなしのテーブルを表示できる。 |
| onload : function(id,op,data,ary) | {} | 行番号・列番号・セルデータなどを取得（以下このオプション使用後に使用するオプション）。 |
| classifyByCol | [] | データの違いでセルを分類し、CSSでセル背景色変化させるなどが可能。 |
| tr:nth-child(行番号)/td:nth-child(列番号) | - | 列を指定し、CSSでセル背景色などを変化させるなどが可能。 |
| tr:even/td:even | - | 行または列を一つおきに指定し、CSSでセル背景色を変化させるなどが可能。 |
「onload : function(id,op,data,ary)」「classifyByCol」の2つのオプションを使ってデータの違いでセルを分類し、CSSでセル背景色を変化させたjquery.csv2table.jsプラグイン適用後を図6に示します。Bの列でセルの値が10以上ならセル背景色が黄色、1000以上ならオレンジ色、10000以上なら赤色となります。
「onload : function(id,op,data,ary)」「classifyByCol」両オプションの使用例をリスト3に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>jQueryプラグイン（jquery.csv2table.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.csv2table-0.02-b-2.8.js" charset="utf-8"></script>
</head>
<body>
<h1>jQueryプラグイン（jquery.csv2table.js) サンプル2</h1>
<!--3.プラグインの設定-->
<div id="view1"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#view1').csv2table('./data/Book1.csv',{
onload : function(id,op,data,ary){
$.csv2table.f.classifyByCol(
id,2,[
['>=10','#ffcc00'],
['>=1000','#ff6600'],
['>=10000','#ff0000']
]
)
}
});
});
</script>
</body>
</html>
表の値を取得する「onload : function(id,op,data,ary)」オプションは、「.csv2table();」の括弧内で、csvファイルのパスを指定した後、カンマで区切って「{}」の中で使用します。すなわち、「.csv2table('csvファイルパス名',{onload : function(id,op,data,ary){取得した値を使用するオプション}});」という形で使用します。
「classifyByCol」オプションは「onload : function(id,op,data,ary){}」の「{}」の中で使用します。まず「$.csv2table.f.classifyByCol()」と記述し、「()」の中に「id,2,[['>=10','#ffcc00'], ['>=1000','#ff6600'], ['>=10000','#ff0000']]」というデータの数値により背景色を変更する処理を記述します。「id」は全ての行番号を表します。「2」は左から3列目の列番号を表します（一番左の列の列番号は0です）。「[]」の中は左から3列目のセルのデータが10以上なら黄色、1000以上ならオレンジ色、10000以上なら赤色にする処理です。
以上に示した使い方で、csvファイルの各種データを取得して表に様々な加工ができます。その他の表示オプションはjquery.csv2table.jsのサイトでも紹介されていますので、試してみてはいかがでしょうか。
