« google app engineで家計簿作り2 | トップページ | google app engine 家計簿 ソース公開 »

2008年11月14日 (金)

google app engineで家計簿3

accountList.js

var AccountList = Class.create({
  initialize:function(elem,type,form)
  {     this.type=type;
    if(this.type == "list")
    {       this.url="/accountList.json";
    }     else     {       this.url="/account.json";
    }     this.elem = $(elem);
    this.form = $(form);
  },
  loadData:function()
  {     var json=null;
    var a = new Ajax.Request(
        this.url,
        {             "method": "get",
            "parameters": Form.serialize(this.form.id),
            onSuccess: function(request) {               eval("json="+request.responseText);
              this.makeAccountList(json);
            }.bind(this),
            onFailure: function(request) {                 alert('読み込みに失敗しました');
            },
            onException: function (request) {                 alert('読み込み中にエラーが発生しました');
            }         }     );   },
  makeAccountList:function(dataSet)
  {       this.elem.innerHTML=""       var total = 0;
      var tableStr = "";
      if(dataSet.length != 0)
      {         tableStr += '<table id="account_list">';
        if(this.type!="list")
        {           tableStr += '<thead><tr><th>項目</th><th>金額</th><th>内容</th><th>機能</th></tr></thead><tbody>';
        }         else         {           tableStr += '<thead><tr><th>日付</th><th>項目</th><th>金額</th><th>内容</th></tr></thead><tbody>';
        }         for(var i=0;i<dataSet.length;i++)
        {

          var data = dataSet[i];
          tableStr +=
'<tr>';
         
if(this.type=="list")
         
{
            tableStr +=
'<td  width="100px">'+data.year+'/'+data.month+'/'+data.date+'</td>';
         
}
          tableStr +=
'<td class="bold" width="120px">'+data.category+'</td>';
          tableStr +=
'<td width="80px" style="text-align:right">'+myFormatNumber(data.price)+'円</td>';
          tableStr +=
'<td width="400px">'+data.content+'</td>';
         
if(this.type!="list")
         
{
            tableStr +=
'<td style="vertical-align:bottom">';
            tableStr +=
'<input class="deleteOfKey" type="submit" value="削除" id="'+data.key+'" /></td>';
         
}
          tableStr +=
'</tr>';
          total += data.price;
       
}
        tableStr +=
"</tbody></table>";
      
}
      tableStr +=
"<hr/> <div>合計 "+ myFormatNumber(total) + "円";
      
this.elem.innerHTML = tableStr;
      $$(
".deleteOfKey").each(function(elem){
      elem.observe(
'click',
      
function(event){this.deleteAccount(event.element().id);}.bind(this))}.bind(this));
 
},
  deleteAccount:
function(key)
 
{
   
var a = new Ajax.Request(
       
"/deleteAccount",
       
{
            
"method": "post",
            
"parameters": "key="+key,
            onSuccess:
function(request) {
             
this.loadData();
            
}.bind(this),
            onFailure:
function(request) {
               
alert('読み込みに失敗しました');
            
},
            onException:
function (request) {
               
alert('読み込み中にエラーが発生しました');
            
}
       
});
   
return false;
 
}
});


メインページ、一覧画面でも使うので、typeによって、メインページか、一覧画面かを分けているのは
昨日説明した通り。
loadDataをinitializeで呼ばないのは、検索画面で検索条件を設定するまで表示させないようにするため。
loadData呼び出しにより、家計簿データをjsonで取得し、makeAccountListでテーブル一覧として
出力している。メインページでは削除できるように削除ボタンを出し、検索画面では、各レコードの日付を
出力している。
      $$(".deleteOfKey").each(function(elem){
      elem.observe('click',
      function(event){this.deleteAccount(event.element().id);}.bind(this))}.bind(this));
はdeleteOfKeyクラスのボタンに対してクリックされるとボタン作成時にボタンのidとして、該当するレコードの
キーを値としてセットしていたので、idを取得することでキーを指定して、削除要求をサーバに
出している。google app enigineのデータの面白いところは、各レコードはidではなく、keyという値を
持ち、それはテーブルではなく、データベースで一意であるということである。
db.get(db.Key(key))で文字列のkeyを実際のkey値にした値をdbに渡せばレコードを取得できる。
bind(this)をしつこくしているのは、イベントハンドラのthisは通常そのエレメントがthisになってしまうが、
bind.thisにすることによって、accountListのインスタンスをthisにできるからである。そうでないと、accountList
クラスのdeleteAccountを呼び出せない。

|

« google app engineで家計簿作り2 | トップページ | google app engine 家計簿 ソース公開 »

Google App Engine」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/68673/43116391

この記事へのトラックバック一覧です: google app engineで家計簿3:

« google app engineで家計簿作り2 | トップページ | google app engine 家計簿 ソース公開 »