その前「jQueryを使ってXMLを解析操作する（サンプルソースコード含める）」でjQueryでXMLを解析する操作を説明しました。次はjQueryのcsv2tableというプラグインを使ってCSVデータをテーブルに表示しようことの説明です。Ajaxを使うと、JSONやXMLなどのテキストファイルを手軽に読み込んでテーブル要素などへ出力できるので便利ですが、昔ながらのアプリ共通テキストフォーマットとしてはやっはりCSVが活躍しています。

jquery.csv2table.jsはExcelなどで生成できるCSVファイルを読み込みtableとして表示する為のjQueryプラグインです。このプラグインを利用して生成されたテーブルは項目ごとのソートなどにも対応しています。列ごとのソートもできて、jQchartなどを組み合わせれば、 CSVを読み込むだけで、自動的にグラフまで作ることも可能です。

以下は使用方法とサンプルのソースコード

１）、csv2tableとダウンロード

jQueryとcsv2tableは次のサイトで入手できます。http://jquery.com　、ここはcsv2table: http://plugins.jquery.com/project/csv2table

２）、ダウンロードしたjQuery本体とと「jquery.csv2table.js」とhead要素などで読み込む

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.csv2table.js"></script>

３）、body要素内に任意のIDを付けた要素を用意する

  1. <div id="view1"></div>

４）、head要素内などのscript要素でプラグインを実行する

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('任意のID').csv2table('読み込むCSV');
  4. });
  5. </script>

５）、CSVデータを用意する(sample.csv)

  1. №,名前,所属,年齢,手数料
  2. 1,ざら,クラスA,10,"100,000 "
  3. 2,まほう,クラスB,8,"80,000 "
  4. 3,ちなと,クラスC,12,"5,000,000 "
  5. 4,ゆみ,クラスD,13,"3,000 "

６）、sample.csvを読み込んでテーブルを描画する

  1. <script type="text/javascript">
  2. $(function(){
  3.     $('#view1').csv2table('sample.csv');
  4. });
  5. </script>

最後にダウンロードしたimgフォルダをテーブルを描画するファイルと同じフォルダにアップロードしてテーブルを表示できます。

メインコンテンツEND ■
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Posted on Saturday, 2nd May 2009 by admin

Tags: , , ,
Posted in Ajax/JavaScript | Comments (0) | 8,569 views

Leave a Reply