続きです。
一覧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の違いを気にする必要なく、改行コードを表せるわけです。
ちなみに、キャリッジリターンなどの改行コードは英語のタイプライターの動作を表したものだそうで、右端まで打ったら紙を1行分上にずらし、左に戻す動作のことだそうです。
$(".staff-list thead").append( gridHeader( rows[0].split(',') ) );
これはstaff-list
classのある要素の<thead>
タグに引数を当てはめます。引数にはこれから出てくる関数が書かれています。.append(html)
に似た機能で.html(html)
があります。今回の場合どちらでも同じ効果が得られます。ただし、.text(html)
は、引数で渡したタグ全体を&
で囲ってしまいますので、単に文字列としてタグが画面に表示されてしまいます。動的に生成した文字列をHTMLとして機能させたい場合は、.append(html)
や.html(html)
を使います。
また、次に示します、gridHeader()
の引数にはCSVデータを1行づつ分割した配列の内、インデックス[0]、つまり1行目を渡しています。さらに渡す際に1行目を,
で分割しています。
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()
の第1引数にはconfig.js
に作成したJSONデータgridTemplate.staff.rowHead
を指定しています。2番目以降の引数はgridTemplate.staff.rowHead
の{0}, {1}
に対応するように、引数のitems
の各要素を指定します。
ここでは、引数を配列で渡すようにしています。もちろん1行分の文字列として引数で渡し、gridHeader
内で,
区切りにしても良いでしょう。
続いて、4行目の一覧ボディを生成する関数です。こちらの引数は、何行分のデータが格納されてもいいように行単位の配列を引数で渡します。
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(); }
2行目のtags
は配列として宣言しています。ここには整形されたHTMLが1行分づつ配列として格納されます。
3行目のfor
のブロックでは、引数の配列の要素数分処理を繰り返します。for
ブロック内は1行分づつの処理が描かれます。
4行目は1行分の文字列を,
区切りで分割します。
5行目以降で1行分のHTMLを4行目で生成した配列で整形して、それを2行目で宣言した配列tags
に格納します。
最後のtags.join()
で配列tags
を全て結合して、一つの文字列に変換します。
viewText.staffType
はcofing.js
で作成したJSONデータの一つですね。そこには配列データとして表示文字列が格納されています。items[3]
には数字が入っています。この数字がviewText.staffType
のインデックスを表していいるわけです。
これでCSVから一覧を生成させることができるようになりました。
次はモーダルウィンドウの表示のさせ方です。