以前の記事「AjaxでCSVを読み込みJavascriptDBを使いselectで抽出表示する方法」でAjaxを使って外部のCSVファイルを読み込み、JavascriptDBで表示するまでを解説したが、今回はまとめとして、スタイルシートでレイアウトして表示する部分を中心に説明する。

まずは、jqueryとdb_core.jsを読み込む

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/db_core.js"></script>

外部CSVファイルの読み込みにはAjaxを使う。
タイムアウトやキャッシュ、エラー時の設定も追加している。

JAVASCRIPT

//Ajaxで外部ファイルを読み込みデータ追加をするfunction
function csvInsert(filename){
	$.ajax({
		url: filename,
		type: 'get',
		dataType: 'text',
		cache: false, //キャッシュしない
		async: false,
		timeout: 1000 //タイムアウト
	})
	.error(function(data){ //エラー時
		alert('ファイルが見つかりません。');
	})
	.success(function(data){
		lines = data.split("\r\n"); //改行で分割
		for(var i=0; i < lines.length; i++){
			if(lines[i] != ""){ //データの存在
				var col = lines[i].split(","); //csvで分割
				DBTest.Insert("members",col); //データ追加
			}
		}
	});
}

上記functionにより、データベースをセットしテーブル名とカラム名をセットした後、

csvInsert("list.csv");

と呼び出せばlist.csv内のデータが、テーブル（この場合はmembersという名称のテーブル）に読み込まれる。

JAVASCRIPT

//データベースをセット
DBTest = new Database ("DBTest");

//テーブル名とカラム名をセット
DBTest.CreateTable("members",Array("id","login","passwd","tel","fax"));

//データを挿入
csvInsert("list.csv");

あとはselect文で自由に抽出が可能

//セレクト文（mySQLと同様）
var selectArr1 = DBTest.Select('select * from members');

前回は

DBTest.View(selectArr1,document);

のようにViewで直接表示させていたが、スタイルシートでレイアウトを調整出来るように、IDやクラスを挿入したいことが多いはず。

抽出データの成形

JAVASCRIPT

//javascriptDBの結果をテーブルに成形するfunction
function mView (o){
	var res = "<table id='mem-tbl'>";

	//テーブルのヘッダー行にカラム名を設定
	res += "<tr class='top'><td>id</td><td>login</td><td>passwd</td><td>tel</td><td>fax</td></tr>";

	for(i = 0; i < o.length; i++){
		res += "<tr>";
		for(j = 0; j < o[i].length; j++){res += "<td>"+o[i][j]+"</td>";}
		res += "</tr>";
	}
	res += "</table>";
	return res;
}

上記functionでは、テーブルにIDを入れ、カラム名の行を追加している。

今回のサンプルページ