モバイル版チェックイン予定表(2) – リストビューで一覧表を表示

前記事の続き。Google App Engineのデータストアからデータを読み込み、jQuery Mobileのリストビューを使って一覧表を表示する。以下ではタグの一覧表ページ(#pgPlanList)を例にとってコードを説明する。

• データストアからデータを読み込む

// JavaScript
// #pgPlanListページが表示されるときに呼ばれる
$(document).on('pagebeforeshow', '#pgPlanList', function(e){
  loadTagPlanM(); // データストアから読み込み
});

function loadTagPlanM(){
  // データストアからtagの一覧を読み込む
  // 条件：プロパティ:tag_nameで昇順、プロパティ:tag_statusが'live'のエンティティ
  gDStagPlan.dbRevAll2('tag_name:ASCENDING', 'tag_status:live', function(tags){
    showTagPlanListM(tags); // 結果をリスト表示する
    gTagPlan = tags;
  });
}

データ読み込みは非同期処理なので、読込関数: gDStagPlan.dbRevAll2()の読み込み完了後に表示関数: showTagPlanListM()を呼び出している。

• 読み込んだデータをリスト表示する

jQuery Mobileでは、リスト表示用に「リストビュー」(data-role=”listview”)というウィジェットが用意されている。

<!-- HTML -->
<!-- 空のリストを用意しておく -->
<ul data-role="listview" id="lvTagPlan" data-inset="true"></ul>
<!-- data-inset="true"で左右に余白＋角丸のリストになる -->

// JavaScript
function showTagPlanListM(tags){
  var lvItem = '';
  $('#lvTagPlan').empty(); // リストビューをクリアする
  for (var i=0; i < tags.length; i++ ){ 
    lvItem = '<li><a href="#pgPlan">' + 
      tags[i].tag_memo + ' - ' + tags[i].tag_name + '</a></li>'
    $('#lvTagPlan').append(lvItem); // リストに項目追加
  }
  $('#lvTagPlan').listview('refresh'); // スタイルを明示的に更新
}

アイテムにリンク(a href)を設定することで、このリストはリンクリストになり、見た目が変化する(右端にアイコンがセットされる)とともに、クリックするとリンク先の画面にジャンプするようになる。なお、データストアtag_memoには予定日付がセットされているので、このコードで追加されるソース例は以下のとおり。

<li><a href="#pgPlan">2013/04/03 - 買い物</a></li>

コードでアイテムを追加した場合は、refresh()メソッドをコールして明示的にスタイルを更新するのを忘れないこと。

• 実行例



• 同じデータをPCブラウザ版で見た結果