【Javascript】jQuery でCSVをテーブル表示

今回は、エクセルなどで作成したCSVファイルをテーブル要素へ自動出力するプラグインです。

Ajaxを使うと、JSONやXMLなどのテキストファイルを手軽に読み込んでテーブル要素などへ出力できるので便利ですが、 多くの事務作業の現場を担うエクセルなど昔ながらのアプリ共通テキストフォーマットとしては やはり、CSVが活躍しています。

そこで、CSVファイルをjQueryで読み込むだけでテーブル表示してくれるプラグイン csv2tableを作ってみました。

列ごとのソートもできて、前回の jQchartを組み合わせれば、 CSVを読み込むだけで、自動的にグラフまで作ることも可能です。

(この記事は、2008.3.1のv0.02リリースに対応して一部修正しました。)

csv2tableとダウンロード

jQueryとcsv2tableは次のサイトで入手できます。

• jQuery
  • Download jquey.js (-1.2.3.min.js)
• csv2table
  • csv2table デモ
  • csv2tableプラグインサイト(最新版ダウンロード)
• jQueryのダウンロードと設置
• Discussion

csv2tableプラグインサイトのリンクから最新版zipファイルをダウンロードして解凍すると、おおまかにみて次のようなディレクトリとファイルが現れます。

v002/
  |
  +--data/
  |
  +--img/
  |
  +--js/
  |
  +--test.htm

とりあえず、test.htmを開くと、デモを見ることができます。

dataフォルダにはCSVファイル、imgフォルダには、各種アイコン、jsフォルダには、jquery-1.2.3.min.jsなどのjQueryやjquery.csv2table-0.02-b-1.2.jsなどのcsv2tableプラグイン、そして、jquery.jqchart-0.02-b-1.7.jsなどのグラフ用のjQchartプラグインと、excanvasフォルダにIE用キャンバス互換ライブラリexcanvas-compressed.jsが入っています。(0.02-b-1.2などはバージョン名です)

test.htmで使用しているバージョンが現状のほぼ安定版となっています。

グラフ機能を使わずにcsv2tableだけを利用するときは、次のようにjquery.jsとcsv2table.jsをインポートして使います。

<script src="./js/jquery-min.js"
      type="text/javascript"></script>
<script src="./js/jquery.csv2table.js" 
      type="text/javascript"></script>

後述するような、のjQchartプラグインによるグラフ機能を利用する場合は、次のように各ライブラリを読み込んで使用します。

<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" 
        type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-1.2.3.min.js" 
        type="text/javascript"></script>
<script src="./js/jquery.jqchart.js" 
        type="text/javascript"></script>
<script src="./js/jquery.csv2table.js" 
        type="text/javascript"></script>

次ページで簡単なサンプルを試してみます。