Google
SSブログ
Parllet 改修（予算の更新の su.. ｜Parllet 改修（予算の更新の su.. ブログトップ

Parllet 改修（予算の更新の submit をやめてjquery.post() に－２）　[公開アプリ]

※ 注意！　このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; ）

01_img.jpg

前回（1/30）の続きです。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）に

頂いたフィードバック、

日計表の月予算「更新」は探してしまいました。通常入力の流れからいくと、下部にあることを想像してしまいます。

についての対応を続けます。（「現状」と「改修案」については前回（1/30）を参照願います。）

 

スポンサードリンク

 

 

■ ざっくり環境

OS：Windows 7 Home Premium

Play Flamework：1.2.4

ブラウザ：IE 11.0

Github公開リポジトリのCommitバージョン：こちら

 

■ 改修作業の小分けを再度提示しておきます

前回（1/30）に実験的に、エントリ毎にひと段落つけ易いように小分けに区切るイメージをしました。

  1. 予算入力ボックスのフォーカス取得・喪失イベントで値の変化を判別し、無視・新規作成・更新・削除を判別する
  2. 1. のイベントの無視以外の場合は合計に反映（加算・減算・削除）する
  3. 1. のイベントの新規作成の場合のアクション（Controllerクラス内のアクションメソッド）を作成
  4. 1. のイベントの更新の場合のアクションを作成
  5. 1. のイベントの削除の場合のアクションを作成

前回は

1. 予算入力ボックスのフォーカス取得・喪失イベントで値の変化を判別し、無視・新規作成・更新・削除を判別する

が完了したので、今回は

2. 1. のイベントの無視以外の場合は合計に反映（加算・減算・削除）する

をブログラミング（ブログを書きながらプログラミング）していきます。

 

■ 体当たり開始

まずは予算合計のセルに id を追加しようと思います。

予算の種類は「収入」・「支出」・「Parllet預入・引出」の３種類に別れているので、それぞれ

bdgtSumIn・bdgtSumOut・bdgtSumPrltInOut としたいですが、

Play framework の、組込みテンプレートタグ

list

によるループ内で記述されているので、判別が必要です。

参考：組込みテンプレートタグ - Play Framework
（参考は 2014/1/31 現在は Play! の1.2.7 のドキュメントです。）

なので、1/16 にも触れた、Play framework の、Groovy を使ったテンプレートの構文

スクリプト: %{…}%

で判別したいと思います。

参考：テンプレートエンジン - Play Framework
（参考は 2014/1/31 現在は Play! の1.2.7 のドキュメントです。）

 

これは同時に、予算入力ボックスにも同じことが言えて、作った Groovy変数の流用もできます。

ただボックスの方は複数行のため、id でなく class名の方に使います。

 

Parllet/app/views/DailyAccount/dailyAccount.html 内に追記（太字の部分）

（前略）
<!-- 枠固定の左下 -->
<ul class="da_tbl_lb">
    #{list items:lWDA, as:'lwda'}
        <li>
            （中略）
            <!-- 予算あり -->
            #{if lwda.bBudgetFlg}
                %{
                    vLargeCate = ''
                    if (lwda.sLargeCategory==messages.get('BalanceType.in'))
                        vLargeCate = 'largeCateIn'
                    if (lwda.sLargeCategory==messages.get('BalanceType.out'))
                        vLargeCate = 'largeCateOut'
                    if (lwda.sLargeCategory==messages.get('BalanceType.parllet_inOut'))
                        vLargeCate = 'largeCatePrltInOut'
                }%
                <!-- 項目・Parllet　毎 -->
                #{if lwda.sItem != ''}
                    （中略）
                    <div class="da_budget daBudgetSubject">
                        （中略）
                        <input type="text" class="numeric bdgtBox ${vLargeCate}" name="e_budget_amount" value="${lwda.lBudgetAmount?.format('###,###')}" />
                    </div>
                #{/if}
                <!-- 大分類毎 -->
                #{else}
                    <div class="da_cate1_2">${lwda.sLargeCategory}</div>
                    <div class="da_budget numeric daBudgetSubject">
                        <span class="padR4" id="${vLargeCate}">
                            ${lwda.lBudgetAmount?.format('###,###')}
                        </span>
（後略）

 

ではイベント部分です。

前回編集後の状態（アラートも消したもの）を提示しておきます。

Parllet/app/views/DailyAccount/dailyAccount.html 内のjQuery(function() {...} 内

/* 予算入力ボックス フォーカス取得イベント */
jQuery('.bdgtBox').focus(function() {
    jQuery(this).data('valClnt', jQuery(this).val());
});

/* 予算入力ボックス フォーカス喪失イベント */
jQuery('.bdgtBox').blur(function() {
    if (jQuery(this).data('valClnt')===undefined) return false;    //フォーカス取得時に万が一 undefined だったら
    if (jQuery(this).data('valClnt')===jQuery(this).val()) return false;    //変化していなければ無視
    if (jQuery(this).data('valClnt')==='') {
        return false;
    }
    if (jQuery(this).val()==='') {
        return false;
    }
});

今回は「無視以外の場合は」なので、

if (jQuery(this).data('valClnt')===jQuery(this).val()) return false;    //変化していなければ無視

この行以降に記述していきます。

 

まずは変数宣言と、予算合計部分の記述を。

変数は、予算合計・予算入力ボックスの変更前の値・変更後の値それぞれのテキスト用と数値用、

予算合計に関してはjQueryオブジェクト格納用を宣言しておきます。

予算入力ボックスの種類（「収入」・「支出」・「Parllet預入・引出」）で予算合計を判別。

予算合計を数値化しておきます。

とりあえずここまでの記述は以下。

var jqSum,
    strLargeCateCode,
    strSum,
    intSum = 0,
    strClnt,
    intClnt = 0,
    strChange,
    intChange = 0;
// 予算合計
if (jQuery(this).hasClass('largeCateIn'))
    strLargeCateCode = 'largeCateIn';
if (jQuery(this).hasClass('largeCateOut'))
    strLargeCateCode = 'largeCateOut';
if (jQuery(this).hasClass('largeCatePrltInOut'))
    strLargeCateCode = 'largeCatePrltInOut';
jqSum = jQuery('#'+strLargeCateCode);
strSum = jqSum.text().replace(/^\s+|\s+$|,/g, "");    //スペースとカンマを除去
if (strSum!=='')
    intSum = parseInt(strSum);

 

予算入力ボックスの変更前の値と変更後の値も数値化し、変更後から変更前を引いた値を予算合計に足しこみます。

// 予算入力ボックスの変更前の値
strClnt = jQuery(this).data('valClnt').replace(/^\s+|\s+$|,/g, "");
if (strClnt!=='')
    intClnt = parseInt(strClnt);

// 予算入力ボックスの変更後の値
strChange = jQuery(this).val().replace(/^\s+|\s+$|,/g, "");
if (strChange!=='')
    intChange = parseInt(strChange);

intSum += (intChange - intClnt);

jqSum.text(addFigure(intSum));

addFigure() は以前にネットで見つけたロジックから作った文字列を3桁区切りにする関数（中身を見たい方はソース（dailyAccount.html）を直接見て下さい。）

 

最後に、同一種類の予算入力ボックスが全て空白にされた場合のみ、予算も削除します。

// 全部空白なら予算削除
var bolDelFlg = true;
jQuery.each(jQuery('.'+strLargeCateCode), function() {
    if (jQuery(this).val()!=='') bolDelFlg = false;
});
if (bolDelFlg) jqSum.text('');

 

さ、今回はこれでOKのはず。

イベント全体はこんな感じ。（太字部分が今回追記）

Parllet/app/views/DailyAccount/dailyAccount.html 内のjQuery(function() {...} 内

/* 予算入力ボックス フォーカス喪失イベント */
jQuery('.bdgtBox').blur(function() {
if (jQuery(this).data('valClnt')===undefined) return false;    //フォーカス取得時に万が一 undefined だったら
if (jQuery(this).data('valClnt')===jQuery(this).val()) return false;    //変化していなければ無視

var jqSum,
    strLargeCateCode,
    strSum,
    intSum = 0,
    strClnt,
    intClnt = 0,
    strChange,
    intChange = 0;
// 予算合計
if (jQuery(this).hasClass('largeCateIn'))
    strLargeCateCode = 'largeCateIn';
if (jQuery(this).hasClass('largeCateOut'))
    strLargeCateCode = 'largeCateOut';
if (jQuery(this).hasClass('largeCatePrltInOut'))
    strLargeCateCode = 'largeCatePrltInOut';
jqSum = jQuery('#'+strLargeCateCode);
strSum = jqSum.text().replace(/^\s+|\s+$|,/g, "");    //スペースとカンマを除去
if (strSum!=='')
    intSum = parseInt(strSum);

// 予算入力ボックスの変更前の値
strClnt = jQuery(this).data('valClnt').replace(/^\s+|\s+$|,/g, "");
if (strClnt!=='')
    intClnt = parseInt(strClnt);

// 予算入力ボックスの変更後の値
strChange = jQuery(this).val().replace(/^\s+|\s+$|,/g, "");
if (strChange!=='')
    intChange = parseInt(strChange);

intSum += (intChange - intClnt);

jqSum.text(addFigure(intSum));

// 全部空白なら予算削除
var bolDelFlg = true;
jQuery.each(jQuery('.'+strLargeCateCode), function() {
    if (jQuery(this).val()!=='') bolDelFlg = false;
});
if (bolDelFlg) jqSum.text('');

if (jQuery(this).data('valClnt')==='') {
    return false;
}
if (jQuery(this).val()==='') {
    return false;
}

});

 

動作確認します。

リロードし、テスト用に居住日用の金額も足しときました。

02_check_01.jpg

 

まずは食費を減らして、

03_check_02.jpg

フォーカス移動。

04_check_03.jpg

ちゃんと予算合計が減算されました。

 

今度は居住日用を消して、

05_check_04.jpg

フォーカス移動。

06_check_05.jpg

このパターンもOK。

 

今度は水道光熱を新規入力して、

07_check_06.jpg

フォーカス移動。

08_check_07.jpg

加算もOKですね。

 

最後に予算入力ボックスを全部削除して、予算合計が消えるか確認します。

09_check_08.jpg

10_check_09.jpg

11_check_10.jpg

オッケイでーす！

 

はい、今回の目標である

2. 1. のイベントの無視以外の場合は合計に反映（加算・減算・削除）する

は完了しました。

次回は

3. 1. のイベントの新規作成の場合のアクション（Controllerクラス内のアクションメソッド）を作成

に入っていきたいと思います。

 

次回に続きます！

 

 

2/1 追記

続きを書きました。

 

 

 

いつも最後まで読んでいただいてありがとうございますm(__)m

何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)

またお越しくださいませませ！

 


タグ：公開アプリ Parllet ブログラミング 体当たり フィードバック対応 jQuery Play Framework
2014-01-31 20:07  nice!(0)  コメント(0)  トラックバック(1) 

nice! 0

コメント 0

コメントを書く

お名前：
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

トラックバック 1

トラックバックの受付は締め切りました
Parllet 改修（予算の更新の su.. ｜Parllet 改修（予算の更新の su.. ブログトップ

スポンサードリンク




私の本棚


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。