kintone

質問に勝手に答えて能力を向上しよう!Part.7

勉強ができるようになるには、類題を多く解くべきだという論がある。
これはプログラミングでも同じこと。
よって僕は勝手にcybozu developer networkに投稿されている質問に答えてみる。

今日の質問はこちら!

チェックボックスを選択したら該当箇所の数字の合計数を表示したい

いつも大変お世話になっております。
現在下記のようなアプリを作成しており、
チェックボックスにチェックを入れたら、該当箇所の数字の合計数を『必要部数』欄に表示したいと考えております。
例:レベル1とレベル2のチェックボックスにチェックをいれたら、
  上の数値フィールド内の10と20を足した30を『必要部数』欄に表示。
  ※全体にチェックを入れたら、10~60まで全ての数を足した210を
  『必要部数』欄に表示。

cybozu developer network

仕様確認

今回苦戦しているのはどうやら必要部数が入るフィールドがテーブルになっている点。

①レベルのチェックボックスの値が変更になったタイミングで
②そのレベルに応じた部数を取得し、
③その部数を必要部数に加算し
④チェックボックスが押された行の必要部数フィールドにその値をセットする

作成開始

①レベルのチェックボックスの値が変更になったタイミングで

changeイベントを使用して、全てのチェックボックスの変化時に発火する。

   var events = ["app.record.create.change.レベル1チェック",
                "app.record.edit.change.レベル1チェック",
                "app.record.create.change.レベル2チェック",
                "app.record.edit.change.レベル2チェック",
                "app.record.create.change.レベル3チェック",
                "app.record.edit.change.レベル3チェック",
                "app.record.create.change.レベル4チェック",
                "app.record.edit.change.レベル4チェック",
                "app.record.create.change.レベル5チェック",
                "app.record.edit.change.レベル5チェック",
                "app.record.create.change.レベル0チェック",
                "app.record.edit.change.レベル0チェック"];

②そのレベルに応じた部数を取得し、

これはそのままeventのフィールドの値を変数に格納していけばよい。

       var record = event.record;
       var level1 = parseInt(record.レベル1.value);
       var level2 = parseInt(record.レベル2.value);
       var level3 = parseInt(record.レベル3.value);
       var level4 = parseInt(record.レベル4.value);
       var level5 = parseInt(record.レベル5.value);
       var level0 = parseInt(record.レベル0.value);
       var row = event.changes.row;

③その部数を必要部数に加算し

totalという変数に、チェックが入っている場合にその部数を加算していく。
チェックボックスは配列扱いなので、===で比較はできないことに注意。

       var total = 0;
       if(row.value.レベル1チェック.value.indexOf("レベル1") >= 0) {
        total += level1;
    }
    if(row.value.レベル2チェック.value.indexOf("レベル2") >= 0) {
        total += level2;
    }
        if(row.value.レベル3チェック.value.indexOf("レベル3") >= 0) {
        total += level3;
    }
        if(row.value.レベル4チェック.value.indexOf("レベル4") >= 0) {
        total += level4;
    }
        if(row.value.レベル5チェック.value.indexOf("レベル5") >= 0) {
        total += level5;
    }
        if(row.value.レベル0チェック.value.indexOf("レベル0") >= 0) {
        total += level0;
    }

④チェックボックスが押された行の必要部数フィールドにその値をセットする

row.value.必要部数.value = total;

これでOK。

完成形

jQuery.noConflict();
(function($) {
   "use strict";
   //イベント記述
   var events = ["app.record.create.change.レベル1チェック",
                "app.record.edit.change.レベル1チェック",
                "app.record.create.change.レベル2チェック",
                "app.record.edit.change.レベル2チェック",
                "app.record.create.change.レベル3チェック",
                "app.record.edit.change.レベル3チェック",
                "app.record.create.change.レベル4チェック",
                "app.record.edit.change.レベル4チェック",
                "app.record.create.change.レベル5チェック",
                "app.record.edit.change.レベル5チェック",
                "app.record.create.change.レベル0チェック",
                "app.record.edit.change.レベル0チェック"];
   
   kintone.events.on(events, function(event) {
       var record = event.record;
       var level1 = parseInt(record.レベル1.value);
       var level2 = parseInt(record.レベル2.value);
       var level3 = parseInt(record.レベル3.value);
       var level4 = parseInt(record.レベル4.value);
       var level5 = parseInt(record.レベル5.value);
       var level0 = parseInt(record.レベル0.value);
       var row = event.changes.row;
       var total = 0;
       if(row.value.レベル1チェック.value.indexOf("レベル1") >= 0) {
        total += level1;
    }
    if(row.value.レベル2チェック.value.indexOf("レベル2") >= 0) {
        total += level2;
    }
        if(row.value.レベル3チェック.value.indexOf("レベル3") >= 0) {
        total += level3;
    }
        if(row.value.レベル4チェック.value.indexOf("レベル4") >= 0) {
        total += level4;
    }
        if(row.value.レベル5チェック.value.indexOf("レベル5") >= 0) {
        total += level5;
    }
        if(row.value.レベル0チェック.value.indexOf("レベル0") >= 0) {
        total += level0;
    }
       row.value.必要部数.value = total;
       return event;
       
   });
})(jQuery);