続きです。
一覧tableの行を全て削除します。下記のようにシンプルにします。
<table class="staff-list table table-bordered table-striped table-hover"> <thead /> <tbody /> </table>
tableのclass属性にスタッフ一覧を識別すためのstaff-listを追加しています。このように何かを特定するための属性としてid属性を使いたくなるかもしれませんが、class属性で指定することをお勧めします。id属性を用いるのはフォームオブジェクトのみというルールでシステムを開発するようにした方が、無用な混乱を避けることができるからです。
bindGridの中身を下記の通り書き加えます。
bindGrid().done(function(csv) {
var rows = csv.split("\n");
$(".staff-list thead").append( gridHeader( rows[0].split(',') ) );
$(".staff-list tbody").append( gridBody( rows ) );
}).fail(function(result) {
alert(result.resposeText);
});
前回までは、.done()の中身をalert(csv)でCSVがちゃんと取得できているかを確かめるまででした。今回、CSVの中身を分解し、Tableに当てはめます。
var rows = csv.split("\n");
これは取得したCSVの中身を改行で分割するという意味です。改行で分割された各行が配列として変数rowsに格納されます。
エスケープシーケンスと言って、通常の文字では表せない特殊なコードを文字で表すための規定されたものです。改行コードには複数の種類があります。例えばWindowsはCR+LF(キャリッジリターン+ラインフィード)ですし、Unix、Mac系はLF(ラインフィード)です。このような厳密に言うところの改行コードの違いを\nはある程度吸収できる、抽象化した書き方になります。Webサイトなど閲覧者のOSの違いを気にする必要なく、改行コードを表せるわけです。
ちなみに、キャリッジリターンなどの改行コードは英語のタイプライターの動作を表したものだそうで、右端まで打ったら紙を１行分上にずらし、左に戻す動作のことだそうです。
$(".staff-list thead").append( gridHeader( rows[0].split(',') ) );
これはstaff-listclassのある要素の<thead>タグに引数を当てはめます。引数にはこれから出てくる関数が書かれています。.append(html)に似た機能で.html(html)があります。今回の場合どちらでも同じ効果が得られます。ただし、.text(html)は、引数で渡したタグ全体を&で囲ってしまいますので、単に文字列としてタグが画面に表示されてしまいます。動的に生成した文字列をHTMLとして機能させたい場合は、.append(html)や.html(html)を使います。
また、次に示します、gridHeader()の引数にはCSVデータを１行づつ分割した配列の内、インデックス[0]、つまり１行目を渡しています。さらに渡す際に１行目を,で分割しています。
ID (スタッフカード),氏名 (編集),メールアドレス,スタッフ,管理,有効,Pwd登録,入社日,退社日,スタッフカード画像
この行を,で分割しているわけです。分割した行は配列になり、インデックス[0]には「ID (スタッフカード)」が、インデックス[3]には「メールアドレス」が格納されます。
さて、引数に書かれている関数gridHeader()を示します。
function gridHeader(items){
return String.format(gridTemplate.staff.rowHead,
items[0],items[1],items[2],items[3],
items[4],items[5],items[6]);
}
前回作成したString.format()を使用して、引数の配列データで整形します。String.format()の第１引数にはconfig.jsに作成したJSONデータgridTemplate.staff.rowHeadを指定しています。２番目以降の引数はgridTemplate.staff.rowHeadの{0}, {1}に対応するように、引数のitemsの各要素を指定します。
ここでは、引数を配列で渡すようにしています。もちろん１行分の文字列として引数で渡し、gridHeader内で,区切りにしても良いでしょう。
続いて、４行目の一覧ボディを生成する関数です。こちらの引数は、何行分のデータが格納されてもいいように行単位の配列を引数で渡します。
function gridBody(rows){
var tags = [];
for(var i = 1; i < rows.length; i++){
var items = rows[i].split(',');
tags.push(String.format(gridTemplate.staff.rowBody,
items[0],
items[1],
items[2],
viewText.staffType[items[3]],
viewText.managementType[items[4]],
items[5],
iconCss.valid[items[5]],
items[6],
iconCss.check[items[6]],
items[7],
items[8],
items[9]));
}
return tags.join();
}
２行目のtagsは配列として宣言しています。ここには整形されたHTMLが１行分づつ配列として格納されます。
３行目のforのブロックでは、引数の配列の要素数分処理を繰り返します。forブロック内は１行分づつの処理が描かれます。
４行目は１行分の文字列を,区切りで分割します。
５行目以降で１行分のHTMLを4行目で生成した配列で整形して、それを２行目で宣言した配列tagsに格納します。
最後のtags.join()で配列tagsを全て結合して、一つの文字列に変換します。
viewText.staffTypeはcofing.jsで作成したJSONデータの一つですね。そこには配列データとして表示文字列が格納されています。items[3]には数字が入っています。この数字がviewText.staffTypeのインデックスを表していいるわけです。
これでCSVから一覧を生成させることができるようになりました。
次はモーダルウィンドウの表示のさせ方です。