前回の投稿、
Handsontable で ClockPicker による時刻入力を行う。 - Oboe吹きプログラマの黙示録
には、問題がある。
これは、Editor の beginEditing (編集開始)にならないと Clockpicker が画面に
現れない点だ。
表のセルをクリックした時は、focus になり、focusしてからダブルクリックにならないと
beginEditing を走らせられない
それが厭で focus してから click で編集開始、Clockpicker を表示する方法は、以下になる。
(前回のように、Handsontable インスタンス生成とするとして、、
// hot は、var hot = new Handsontable(document.getElementById("table"), { ... } ) で作成、、 var timeEditor = Handsontable.editors.PasswordEditor.prototype.extend(); timeEditor.prototype.focus = function() { this.TEXTAREA.setAttribute('type', 'text'); var editor = this; var targetInput = $(this.TEXTAREA); targetInput.clockpicker({ autoclose: true, afterDone: function(){ hot.setDataAtCell(editor.row, editor.col, targetInput.val()); } }); this.beginEditing(); }; timeEditor.prototype.beginEditing = function() { $(this.TEXTAREA).clockpicker('show').clockpicker('toggleView', 'hours'); Handsontable.editors.TextEditor.prototype.beginEditing.apply(this, arguments); };
focus 時処理で、this.beginEditing(); を実行することで、編集開始にしてしまう。
でも、この方法は、Clockpicker を表示するセルだけ、右クリックの
コンテキストメニュー、任意のコンテキストメニュー表示ができなくなる。
これを解決させる方法がまだわからない。