2011.2.13 1:09 by e3

前回でUTF-8の文字コードが解決したので、
jQueryで、試行錯誤しつつ、詰めていきたいと思います。

今回は、とりあえず、実験用にこちらのファイルで作業します。

SI_Tool_Box > index_test.html

CVSデータをHTMLにテーブル表示する仕組みを使うにあたって、
今回は、このjQueryプラグインを使わせていただきました。
作者様ありがとうございます!

csv2table
http://plugins.jquery.com/project/csv2table

■csv2tableのダウンロード

csv2tableのサイトには、
必要なファイル一式とサンプルがそろった
「csv2table-0.02-b-2.8.zip」のリンクがあるのですが、
なぜか、ダウンロードできない状態です。

「csv2table」単体のダウンロードは、可能ですが、
他にどんなファイル一式が必要なのか見当もつかないので(汗

「jQchart」という、「csv2table」と併用して、
テーブル表示だけではなくグラフ表示もできると言うプラグインで、
ファイル一式のダウンロードができたので、そちらで。

jQchart
http://plugins.jquery.com/project/jQchart

サイトの右上にある「v0.03-beta-1.zip」をダウンロードしたら、
解凍しておきます。

asiato0213.png
 

あと、この中にある「csv2table」のバージョンが
古いみたいなので、「csv2table」の最新もダウンロードしておきます。

現時点の最新は「0.2-b-2.8」です。

asiato0213_3.png
 

■設置手順

  1. 「v0.03-beta-1.zip」を解凍。「v003」フォルダができる。
     
  2. 今回、サンプルデータとかはいらないので、
    必要なものだけとって、任意のところに置くことに。

    v300 >libフォルダ内を全て

    これだけでいいみたい。
     
  3. 今回は、先ほどのフォルダ内の全てを下記に移動してみました。

    SI_Tool_Box > lib >jsフォルダ
     
  4. 「csv2table」のバージョンが古いので、新しいのに差し替えます。
    古いのは「jquery.csv2table-0.02-b-1.6.js」、
    新しいのは「jquery.csv2table-0.02-b-2.8.js」になってます。

    asiato0213_2.png
     
  5. テーブルに表示したい内容の元になるCSVファイルを用意。
    作り方等は、後々まとめたいと思います。

    SI_Tool_Box > lib >data >test.csv

    中身はテキストエディタで見れます。
    カンマで、仕切ってる感じです。こんな感じ。

    ,"A","B","C","D"
    ,"A1","B1","C1","D1"
    ,"A2","B2","C2","D2"
    ,"A3","B3","C3","D3"
    ,"A4","B4","C4","D4"
    ,"A5","B5","C5","D5"
  6. jQueryとプラグインが動くように「index_test.html」を編集します。
    <head></head>内に赤文字のように追記。

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SoftimageToolBox_test</title>
    <script type="text/javascript" src="lib/js/jquery-1.2.3.min.js"></script>
    <script type="text/javascript" src="lib/js/jquery.csv2table-0.02-b-2.8.js"></script>
    <link rel="stylesheet" href="lib/themes/jquery_style.css" />
    </head>
  7. CSVを読み込むための処理の文字列を入れます。
    どこでもいいみたいなのですが、とりあえず<body>の下にしました。
    赤文字の部分が追加部分で、
    太字のところにファイルへのパスを書けば良さそうです。

    <body>
    <script>
    $(function(){
    	  $('#view0').csv2table('lib/data/test.csv');
    	});
    </script>
  8. テーブルを表示したいところに下記の文字列を入れればよいそうです。
    ちなみに、赤文字部分を編集すれば、
    複数のテーブルを設置できるそうですが、そのことはまた後々に。

    <div id="view0"></div>

これで、終わりです。
こんな感じで見えてると思います。

asiato0213_4.png

一部画像が出てない箇所がありますが、これは、また別の機会に。
ここから、いろいろといじっていきたいと思いますー。

+ 1クリックで応援してください +
にほんブログ村 Webデザイン
[ click ]