業務アプリ開発講座

続きです。

一覧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に格納されます。

$(".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から一覧を生成させることができるようになりました。

次はモーダルウィンドウの表示のさせ方です。

Tweet