表示したスポットを並べて、チェックイン予定を作成する。出来上がりのイメージは以下のとおりで、右に並んでいる(保存済)スポットを、左の表にドラッグすることで予定表を完成させていく。
xlocplan03.html
- 空の予定表を作成/表示する(1):initDisp_tblPlan()
初期状態では、時刻だけが入った空の予定表を表示しておく。予定表には、左から「時刻」「スポット名」「行追加ボタン」「行削除ボタン」を並べる。
// JavaScript function initDisp_tblPlan(){ var tm = ['09:00', '09:30', (省略) , '17:00']; for (gPlan1RowIndex = 0; gPlan1RowIndex < tm.length; gPlan1RowIndex++) { $('#tblPlanSpot1').append(getNewRowPlan(gPlan1RowIndex)); setRowPlan(gPlan1RowIndex,tm[gPlan1RowIndex],''); // 時刻をセットする } }
getNewRowPlan()は空の行(tr/tdタグ)を生成する自作の関数で、まず空行を作ってから時刻(上記の例では9:00,9:30…)を設定していく。
getNewRowPlan()で予定表の1行分を作成する。この関数は初期化(ページロード時)以外に、行追加ボタンがクリックされたとき、保存済の予定表を読み込んだときにも呼ばれる。
// JavaScript function getNewRowPlan(idx){ var spnTime = '<input id="tspn' + idx + '" class="easyui-timespinner"></input>'; var txtSpot = ''; // '<div id="txtspot' + idx + '"></div>'; var btnAdd = '<button type="button" class="btnAddPlanRow" idx="' + idx + '"></button>'; var btnDel = '<button type="button" class="btnDelPlanRow" idx="' + idx + '"></button>'; var rowItem = '<tr>'; rowItem += '<td>' + spnTime + '</td>' // 時刻 rowItem += '<td class="drop" id="txtspot' + idx + '">' + txtSpot + '</td>';//spot名 rowItem += '<td>' + btnAdd + btnDel + '</td>'; // 追加ボタン・削除ボタン rowItem += '</tr>'; return rowItem; }
時刻入力にはjQuery EasyUIの時刻入力ボックスを利用している。後処理を簡単にするために、固有のID(固定文字列’tspn’+数値)を付与しておく。同様にスポット名には固有のID(‘txtspot’+数値)を、ボタンにも連番を振っておく。
setRowPlan()は空の行に、時刻・スポット名をセットする自作の関数。
// JavaScript function setRowPlan(idx, xtime, xspotname){ $('#tspn' + idx).timespinner({ value: xtime, required: true, width: 70, height: 18 }); $('#txtspot' + idx).text(xspotname); //$('#txtspot' + idx).addClass('drop'); }
このタイミングで、追加した行にドロップできるようにしておく。
行追加ボタン・削除ボタンをクリックしたときのイベントハンドラを記述する。
ピンバック: 自動チェックインアプリ(4) チェックイン予定表の作成 | Try Lifelog