以前の記事「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を入れ、カラム名の行を追加している。