数値フィールドにスピンボタンをつけることは不可能でしょうか？
こういう機能がデフォルトでついてくれているとユーザーインターフェースがずっと改善するのですが、、、。
いまは仕方が無いので手打ち入力になっていますが、ちょっとした変更であればスピンボタンのほうが便利な場面は多いはず！と思っています。
DOM操作でもいいので、ご存知の方がいたらぜひご教示ください。
milkyway0307 さん
ｊQuery,jQuery UI を使うと可能です。jQuery UI の css も忘れずに指定してください。
バージョンは、お好みのものを試してみてください。
https://js.cybozu.com/jquery/2.1.4/jquery.min.js
https://js.cybozu.com/jqueryui/1.11.4/jquery-ui.min.js
https://js.cybozu.com/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event) {
$('.gaia-ui-decimal-input-input input').spinner({ step:1 }).css('padding', '0px 20px 0 8px');
return event;
});
})(jQuery);
追記
スピンボタンで値を変化させることはできましたが、その変化で app.record.edit.change.<フィールドコード> でのイベントが発火しないように思うのは気のせいでしょうか？
そうですね、DOM 操作で値を設定するだけですので、change イベントは発生しませんね。
change イベントを発生させるには、レコードに反映させるための工夫が必要です。
こんな感じでいけると思います。
‘xxxxxx’、‘yyyyyyy’ は、項目に付与された番号です。デバッグツールなどで調べてください。
jQuery.noConflict();
(function($) {
"use strict";
kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event) {
$('.gaia-ui-decimal-input-input input').spinner({ step:1 }).css('padding', '0px 20px 0 8px')
.on('spin', function(e, ui) {
var fcodesByNo = {
'xxxxxx': '数値1',
'yyyyyyy': '数値2',
};
var fno = $(this).parents('div.control-value-gaia')[0].className.split('control-value-gaia value-')[1];
var fcode = fcodesByNo[fno];
if(fcode) {
var rec = kintone.app.record.get();
rec.record[fcode].value = ui.value;
kintone.app.record.set(rec);
}
});
return event;
});
})(jQuery);
rex0220様
いつもありがとうございます。非常に勉強になります。
実のところ、やりたいのはサブテーブル上にあるスピンボタンにchangesイベント発火させたいのです。
$(this).parents(‘table’) をしてからテーブルの table.rows の配列を走査してspinを発火させた行がどこかを見つけたらいいのではないかと考えているのですが、まだコーディングはできていません。
この方針で問題ないでしょうか？
行位置は、tr を見るとわかります。
こんな感じで、サブテーブル行位置を取得できます。
var tr = $(this).parents('tr')[0];
if(tr) {
var r = tr.rowIndex - 1;
console.log(r);
}
rex0220様
ありがとうございます。
おかげさまで、サブテーブルのスピンボタンからchangesイベントが発火することは確認できました。
一方で、kintone.app.record.set による値の変更が終わる前にイベントが発火しているらしく、イベントの中でevent.recordを参照すると変更されていないということも起きています。そんな状況ですので、手入力なら問題なく動くイベント処理で不具合も出ています。
これについては、イベント処理そのものの作り方をもう少し工夫してみます。
このような用途の場合、 spin イベントでは無く、 change イベントのほうがよさそうですね。
change イベントは、フォーカスが外れた時に発生します。
http://js.studio-kingdom.com/jqueryui/widgets/spinner
rex0220様
返信ありがとうございます。
もともとはサブテーブルの数値を変更すると、それに伴うchangesイベントで集計値が変更されるようなものを作っていました。そこにスピンボタンによる変更を加えようとして、前述のようにつまずいた次第です。
結論として、kintone.app.record.set によって生じるchangesイベントだとうまくいかなかったので、spinイベントの中で同様の集計処理をしてからkintone.app.record.setで集計済みの値をセットすることにしました。そのうえで、kintone.app.record.setで発生するchangesイベントはスルーするように、フラグを立てて分岐処理をしました。
ともあれ、お陰様で、やりたかった機能はこれでどうやら実現できたようです。もう少し動作チェックをして確認しますが、ここまでくれば自力でもなんとかなりそうです。この度は大変にお世話になりました。ありがとうございました。