Parllet（個人作成Web家計簿アプリ）の残高表改修－３

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

こんばんは。

ゴールデンウィークにあまり子供と遊んであげられなかった @sakashushu です。

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）の、4/28 にポストした改修案 に沿ってのブログラミング（ブログを書きながらプログラミング）の続きです。

続きなんですが、 昨日のエントリ からの流れの部分に入る前に問題点が見つかりまして、その対応を行います。

 

スポンサードリンク

 

 

■ ざっくり環境

OS：Windows 7 Home Premium
Play Flamework：1.2.4
ブラウザ：IE 11.0
Github公開リポジトリ のCommitバージョン（スタート時点）： こちら

 

 

■ 見つかった問題点

左右端部分の先頭のチェックボックス「残高０を隠す」や「無効にしたものを隠す」にチェックを入れてた際の動きです。

 

例として「無効にしたものを隠す」で。

チェックを入れると左右端部分のセルは隠れますが、

 

真ん中部分のセルは隠れません。

 

いつものように体当たりでブログラミング（ブログを書きながらプログラミング）していきます。

 

 

■ 体当たり開始

5/3 の改修 で、真ん中部分の各セルに最低限の高さを持たせました。

無条件に最低限の高さを持たせている状態なので、「残高０を隠す」や「無効にしたものを隠す」にチェックが入っている時は最低限の高さを持たせないようにします。

Parllet/app/views/DailyAccount/balanceTable.html 内の編集（太字の部分）

/* divBtStkdRealEach の表示処理 */
function dspDivBtStkdRealEach() {
    
    （中略）
    
    for (i=0; i < intLwdaRealSize; i++) {
        
        （中略）
        
        if (intMaxHt < intHt) {
            intMaxHt = intHt;
            intMaxHtIdx = i;
        }
        
        aryIntHt[i] = intHt;
        if (!((jQuery('.remBkemZero').hasClass('invisible') && aryLwdar[i].lngAmount===0) ||
                (jQuery('.remBkemInv').hasClass('invisible2') && aryLwdar[i].bolInvFlg))) {
            aryIntHt[i] += intMinHt*100;    //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
        }
        
        （中略）
        
    }
    
    （中略）
    
}

 

リロードして再表示。

 

はい、真ん中部分のセルも隠れました。

しかしその分全体の高さが、右のParllet残高より小さくなりました。

 

真ん中部分のセルの全体の高さも 5/3 の改修 で、最低高さ×セル数を予め引く処理をしていたので、その部分に「残高０を隠す」や「無効にしたものを隠す」のチェックの判断を加えます。

Parllet/app/views/DailyAccount/balanceTable.html 内の編集（太字の部分）

<script type="text/javascript">
<!--
var bolDlgFrmUpdMstInsBkem,
    
    （中略）
    
    intLwdaRealSize = ${lWDA_R.size},
    intLwdaRealSizeDsp = 0,
    
    （中略）
    
    intMinHt;    // 真ん中部分の最低高さ(＝左右端部分のセルの高さ)

（中略）

/* divBtStkdRealEach , divBtStkdPrltEach の表示処理 */
function dspBtStkd() {
    
    （中略）
    
    intDivBtStkdHt = jqHt*2*100;
    
    intLwdaRealSizeDsp = 0;
    for (i=0; i < intLwdaRealSize; i++) {
        if (!((jQuery('.remBkemZero').hasClass('invisible') && aryLwdar[i].lngAmount===0) ||
                (jQuery('.remBkemInv').hasClass('invisible2') && aryLwdar[i].bolInvFlg))) {
            intLwdaRealSizeDsp++;
        }
    }
    
    // セルの(ボーダーの高さ＋最低高さ(＝左右端部分のセルの高さ))×セル数を予め引いておく
    intMinHt = jQuery('.bt_tbl_each li div').height();    // 真ん中部分の最低高さ(＝左右端部分のセルの高さ)
    intDivBtStkdHtReal = intDivBtStkdHt-intLwdaRealSizeDsp*(1+intMinHt)*100;
    intDivBtStkdHtPrlt = intDivBtStkdHt-intLwdaPrltSize*(1+intMinHt)*100;
    
    （中略）
    
}

（中略）

// -->
</script>

 

リロードして再表示。

はい、これで右のParllet残高の高さともほぼ一致したんですが、実は罫線の1px分だけずれています。

 

その証拠に、データ数の多い「残高０を隠す」の方にチェックを入れると、その差が積み重なってずれも大きくなります。

 

先程の最低限の高さを持たせないようにした部分で、罫線を消す処理も加えます。

Parllet/app/views/DailyAccount/balanceTable.html 内の編集（太字の部分）

aryIntHt[i] = intHt;
if (!((jQuery('.remBkemZero').hasClass('invisible') && aryLwdar[i].lngAmount===0) ||
        (jQuery('.remBkemInv').hasClass('invisible2') && aryLwdar[i].bolInvFlg))) {
    aryIntHt[i] += intMinHt*100; //真ん中部分の最低高さ(＝左右端部分のセルの高さ)をここで足す
    jQuery("#divBtStkdRealEach_"+i).css('border-bottom', '1px solid #aaa');
} else {
    jQuery("#divBtStkdRealEach_"+i).css('border-bottom', '0');
}

 

リロードして再表示。

 

はい、これで罫線分のずれも解消されました！

 

ということで、今回は予定外の問題点への対応でございました。

お疲れ様でした！

 

---

 

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

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

 

メール：
[e-mail]

ツイッター：
https://twitter.com/sakashushu

フェイスブック：
https://www.facebook.com/shuichi.sakamoto.90

 

ご連絡・フォロー・友達申請 等、いつでもお気軽にどうぞ！

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

 

タグ：公開アプリ Parllet 体当たり ブログラミング jQuery CSS