Handsontable の右クリックコンテキストメニューの callback は、選択領域をメソッドの 引数で認識できますが、 disabled - メニュー表示するが非活性にするなら true この時、メソッド引数で選択領域を知ることができません。 代用になりますが、最後に選択…

show 実行の引数、JSON で渡す。例） <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> : 省略 $('#exampleModal').modal('show', { 'dvalue': 'i001' }…</div></div></div>

Handsontable インスタンスの getDataAtRow( row ) は、表示しているグリッドデータの表示範囲しか取得しない。 つまり、４列存在するデータでも、maxCols : 3 と定義していれば、 表示している３列までしか getDataAtRow はデータ取得をしない。グリッド表…

コンテキストメニューが実行する callback 関数の引数 key contextmenu の items で定義したキー名称 selection focusしているセルの開始から終わりまでの row と col clickEvent マウスイベント console.log("start (" + selection[0].start.row+ ","+selec…

Excel の Window枠の固定のように、Handsontable では、列インデックスを指定して 指定インデックスより左側を固定にするオプション fixedColumnsLeft がある。現在選択しているセルに対して、この fixedColumnsLeft の値をセットするように コンテキストメ…

自分で作っていて気に入らなかった oboe2uran.hatenablog.comこれを解決してくれたブログ記事を見つけました。 【Handsontable】セル内に時刻入力(ClockPicker)の表示 - Qiita非常に助かり、感謝です。そのまま、コピーで使わせてもらいたいと思います。 外…

たくさんの行、列が存在するグリッドはスクロール操作をした時に崩れることがあります。 この原因は、Handsontable ではなく、 そもそも、HTMLの表示をブラウザでは、DOM + CSS → CSSOM というCSSOM を作るわけですが、 このCSSOM を作る間、ブラウザがレン…

原始的な方法であるが思いつくのは、afterFilter イベントをフックして、 条件配列の数を記録しておくことだろう。 var conditionsStackLength = 0; var hot = new Handsontable(document.getElementById("table"), { data: data, language: 'ja-JP', column…

columns でセットする validator に、以下のように callbaclk を呼べば 空なら、エラーになる。 var hot = new Handsontable(document.getElementById("table"), { data:data, columns: [ { type:'text', validator: function(value, callback){ callback(!!…

afterAutofill イベントフックの処理を定義する。例） var data = [ [ "a", 1, ], [ "b", 2, ], [ "c", 3, ], [ "d", ], [ "e", ], [ "f", ], ]; var hot = new Handsontable(document.getElementById("table"), { data:data, columns: [ { type: 'text', },…

Handsontable の再描画メソッドは、 インスタンスのメソッド render() で、できると思ってましたが、 うまくいかず再描画されません。loadData( array ) を使うと再描画されます。dataSchema を使うケース、、、 var hot = new Handsontable(document.getEle…

Handsontableの dropMenu 及び、条件フィルタは、バージョン 7.0.0 以降から利用可能で かなり Excel 同様の条件フィルタに操作性が近づいている。 Handsontable インスタンス生成のオプションで、filters: true と dropdownMenu: true を付与する。 バージ…

ボタンを配置するときと同様に、HtmlRenderer を使うのだが。。。 グリッドデータJSON に、URLを持って表示させる場合は、renderer の指定に、"html" を指定する。 で良かった。 var data = [ { link:'<a href="http://google.co.jp">google</a>' } ]; var hot = new Handsontable(document.get…

先日書いた、 oboe2uran.hatenablog.com このサンプル、押下したボタンの特定方法が良くない！ Class属性ではなくて、ちゃんとボタンタグに割り当てる id で、特定させるべきで、 HTMLRenderer で生成時に、列番号を付与したIDにしておくべきだ。 var hot = …

IPv4 の正規表現^([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$ ↑↑↑↑↑↑ 長くてこのページでは隠れてしまってい…

Handsontable で、セル内に配置したボタン押下にイベントから押された対象を参照するのは、 event.realTarget だと思っていたが、 Ver 8.0.0 以降では、この名称ではなく、 event.toElement であった。 以下のようにする。 カラム定義で 指定する Renderer …

ClockPicker で、時（Hour）だけの入力にする方法、 つまり、時（Hour）の選択後、分（minute）を選択する表示をせずに、入力を終わらせて hh:00 が入力結果になるようにする方法 Option で、afterHourSelect のイベント捕捉の処理を書き、 data('clockpicke…

前回の投稿、 Handsontable で ClockPicker による時刻入力を行う。 - Oboe吹きプログラマの黙示録 には、問題がある。 これは、Editor の beginEditing （編集開始）にならないと Clockpicker が画面に 現れない点だ。 表のセルをクリックした時は、focus …

Handsontable の Cell type : time は、 書式による入力バリデーションチェックはあるものの、date type のように、 Date picker 同様、Time の picker までは標準で提供していない。 Handsontable セル入力として、ClockPicker http://weareoutman.github.i…

ClockPicker を利用で、 分の選択を１５分区切り（＝クォータ）に限定したい。 つまり、 時間の選択して、 分の選択が、、、 となって、０分、１５分、３０分、４５分だけの入力にしたい。 元々、分の選択は、この分表示の間、8分など、間の入力は、、 でで…

セルに配置するテキストの alignment は、 Text alignment - Guide - Handsontable Documentation のとおりで、 行追加、セルの追加操作が行われない時、つまり表の再描画が行われない時、 水平方向のクラス名 htLeft , htCenter , htRight , htJustify 縦方…

行最大数 maxRows は、Handsontable インスタンス生成時に、オプション属性の１つとして 設定する。 var data = [ { A:false, B:0, C:'' } ]; var hot = new Handsontable(document.getElementById("table"), { data: data, columns:[ { data: 'A', type: 'c…

任意のWebページに埋め込みで公開したい場合の画面操作メモです。ブラウザでGoogleアカウントに入って公開したいGoogleSpreadSheet を開きます ファイルメニューから「ウェブに公開」を選択 「埋め込み」を選択して公開するコンテンツを、ドキュメント全体で…

無償版の Handsontable Ver6.2.2 を使ったとき、HandsontableからCSV出力 を簡単にできるものを探していた。https://github.com/juantascon/jquery-handsontable-csvを見つけた、MITライセンスである。 中身をよく見ると var csv = "sep=;\n" csv += headers…

共通で使用するCSS、JS が存在しページ毎の CSS 、JS を構成しなければならず 複数ページを大量に構築する場合の、Flask Blueprintを使用する方法注意すべきは、 ・Flask で指定したテンプレートフォルダに、Blueprint でテンプレート走査するフォルダを 追…