SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

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

「jQuery プラグイン」の利用(10)

  • X ポスト
  • このエントリーをはてなブックマークに追加

csv形式の表を読み込み、ソート可能なテーブルとして表示できる - jquery.csv2table.jsプラグイン

 jquery.csv2table.jsプラグインは、Excelなどcsv形式で用意したデータをhtmlのテーブルに変換して表示するためのプラグインです。このプラグインを使うことによって、単純にcsv形式で用意したデータをhtml表示させることができるだけでなく、項目ごとにソートができるなど、見栄えの良い表を表示できます。

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

 jquery.csv2table.jsプラグイン適用後を図4、図5に示します。図4は表を表示したところ、図5は列Bでソートをかけたところです。

図4 jquery.csv2table.jsプラグイン適用後
図4 jquery.csv2table.jsプラグイン適用後
図5 jquery.csv2table.jsプラグイン適用後(列Bでソート後)
図5 jquery.csv2table.jsプラグイン適用後(列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プラグインの使用例を示します。

リスト2 jquery.csv2table.jsプラグインの使用例(jQueryPlugin_csv2table.html)
<!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に示します。

表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以上なら赤色となります。

図6 jquery.csv2table.jsプラグイン適用後(データの違いでセル背景色変更)
図6 jquery.csv2table.jsプラグイン適用後(データの違いでセル背景色変更)

 「onload : function(id,op,data,ary)」「classifyByCol」両オプションの使用例をリスト3に示します。

リスト3 jquery.csv2table.jsプラグインの使用例(jQueryPlugin_csv2table2.html)
<!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のサイトでも紹介されていますので、試してみてはいかがでしょうか。

次のページ
カーソルを合わせると行・列を色付き表示できる - tableHoverプラグイン

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 小林 健志(コバヤシ タケシ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6636 2012/07/03 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング