自動チェックインアプリ(3) – チェックイン予定表の作成(初期化)

表示したスポットを並べて、チェックイン予定を作成する。出来上がりのイメージは以下のとおりで、右に並んでいる(保存済)スポットを、左の表にドラッグすることで予定表を完成させていく。
xlocplan03.html
xlocplan03_a01

  • 空の予定表を作成/表示する(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…)を設定していく。

  • 予定表を作成する(2):getNewRowPlan()
  • 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’+数値)を、ボタンにも連番を振っておく。

  • 予定表を作成する(3):setRowPlan()
  • 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):btnAddPlan1Row()
  • 行追加ボタン・削除ボタンをクリックしたときのイベントハンドラを記述する。

  • 実行例
  • ここまでのコードを実行すると以下のようになる。
    xlocplan03_b01
    いくつかの行の時刻を変更・行削除/追加した結果例は以下のとおり。
    xlocplan03_b02

カテゴリー: Development, Location Service タグ: , , パーマリンク

自動チェックインアプリ(3) – チェックイン予定表の作成(初期化) への1件のフィードバック

  1. ピンバック: 自動チェックインアプリ(4) チェックイン予定表の作成 | Try Lifelog

コメントは停止中です。