前回でUTF-8の文字コードが解決したので、
jQueryで、試行錯誤しつつ、詰めていきたいと思います。
今回は、とりあえず、実験用にこちらのファイルで作業します。
SI_Tool_Box > index_test.html
CVSデータをHTMLにテーブル表示する仕組みを使うにあたって、
今回は、このjQueryプラグインを使わせていただきました。
作者様ありがとうございます!
■csv2tableのダウンロード
csv2tableのサイトには、
必要なファイル一式とサンプルがそろった
「csv2table-0.02-b-2.8.zip」のリンクがあるのですが、
なぜか、ダウンロードできない状態です。
「csv2table」単体のダウンロードは、可能ですが、
他にどんなファイル一式が必要なのか見当もつかないので(汗
「jQchart」という、「csv2table」と併用して、
テーブル表示だけではなくグラフ表示もできると言うプラグインで、
ファイル一式のダウンロードができたので、そちらで。
サイトの右上にある「v0.03-beta-1.zip」をダウンロードしたら、
解凍しておきます。
あと、この中にある「csv2table」のバージョンが
古いみたいなので、「csv2table」の最新もダウンロードしておきます。
現時点の最新は「0.2-b-2.8」です。
■設置手順
-
「v0.03-beta-1.zip」を解凍。「v003」フォルダができる。
-
今回、サンプルデータとかはいらないので、
必要なものだけとって、任意のところに置くことに。
v300 >libフォルダ内を全て
これだけでいいみたい。
-
今回は、先ほどのフォルダ内の全てを下記に移動してみました。
SI_Tool_Box > lib >jsフォルダ
-
「csv2table」のバージョンが古いので、新しいのに差し替えます。
古いのは「jquery.csv2table-0.02-b-1.6.js」、
新しいのは「jquery.csv2table-0.02-b-2.8.js」になってます。
-
テーブルに表示したい内容の元になる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"
-
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>
-
CSVを読み込むための処理の文字列を入れます。
どこでもいいみたいなのですが、とりあえず<body>の下にしました。
赤文字の部分が追加部分で、
太字のところにファイルへのパスを書けば良さそうです。<body> <script> $(function(){ $('#view0').csv2table('lib/data/test.csv'); }); </script>
-
テーブルを表示したいところに下記の文字列を入れればよいそうです。
ちなみに、赤文字部分を編集すれば、
複数のテーブルを設置できるそうですが、そのことはまた後々に。
<div id="view0"></div>
これで、終わりです。
こんな感じで見えてると思います。
一部画像が出てない箇所がありますが、これは、また別の機会に。
ここから、いろいろといじっていきたいと思いますー。
にほんブログ村 Webデザイン
[ click ]