Handsontable
Handsontable は、DataSchema を定義しておけば 行挿入(row_above)で生成される行の初期値が定義した値になる。 DataSchema での定義は、Handsontable インスタンス生成のタイミングで決まる。 後からこれを変更するなんてナンセンスである。 また、DataSc…
Handsontable インスタンスメソッドの getData~ は、よく使うもので、 これは、あくまでも表示データを取得するもの。 getDataAtRow(row) 指定行インデックスの表示データを取得 getDataAtCell(row, col) セルの表示データを取得 getDataAtProp('name') テー…
Handsontable Datepicker の日本語化は、datePickerConfig 属性を以下のように、 長ったらしい書き換えが必要だ。 columns:[ { type: 'date', width: 120, dateFormat: 'YYYY/MM/DD', datePickerConfig: { yearSuffix: '年', showMonthAfterYear: true, show…
特定の列全てを readOnly にする場合は、columns 定義で、readOnly = true を指定、 動的に任意のセルに対して readOnly = true を指定したければ、 先日のように、セルのメタ情報のreadOnly を true にして、render() 実行すれば良いが、 Handsontable read…
column 定義で、readOnly 属性を true にすれば、読込専用になるのだが、 動的に設定する方法で、コンテキストメニューに、make_read_only が用意されている。 Context menu - Guide - Handsontable Documentation 解除する時は、 このコンテキストメニュー…
Handsontable の右クリックコンテキストメニューの callback は、選択領域をメソッドの 引数で認識できますが、 disabled - メニュー表示するが非活性にするなら true この時、メソッド引数で選択領域を知ることができません。 代用になりますが、最後に選択…
Handsontable インスタンスの getDataAtRow( row ) は、表示しているグリッドデータの表示範囲しか取得しない。 つまり、4列存在するデータでも、maxCols : 3 と定義していれば、 表示している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 = …
Handsontable で、セル内に配置したボタン押下にイベントから押された対象を参照するのは、 event.realTarget だと思っていたが、 Ver 8.0.0 以降では、この名称ではなく、 event.toElement であった。 以下のようにする。 カラム定義で 指定する Renderer …
前回の投稿、 Handsontable で ClockPicker による時刻入力を行う。 - Oboe吹きプログラマの黙示録 には、問題がある。 これは、Editor の beginEditing (編集開始)にならないと Clockpicker が画面に 現れない点だ。 表のセルをクリックした時は、focus …
Handsontable の Cell type : time は、 書式による入力バリデーションチェックはあるものの、date type のように、 Date picker 同様、Time の picker までは標準で提供していない。 Handsontable セル入力として、ClockPicker http://weareoutman.github.i…
セルに配置するテキストの alignment は、 Text alignment - Guide - Handsontable Documentation のとおりで、 行追加、セルの追加操作が行われない時、つまり表の再描画が行われない時、 水平方向のクラス名 htLeft , htCenter , htRight , htJustify 縦方…
行最大数 maxRows は、Handsontable インスタンス生成時に、オプション属性の1つとして 設定する。 var data = [ { A:false, B:0, C:'' } ]; var hot = new Handsontable(document.getElementById("table"), { data: data, columns:[ { data: 'A', type: 'c…
無償版の Handsontable Ver6.2.2 を使ったとき、HandsontableからCSV出力 を簡単にできるものを探していた。https://github.com/juantascon/jquery-handsontable-csvを見つけた、MITライセンスである。 中身をよく見ると var csv = "sep=;\n" csv += headers…
Tabulator で表示した表から、BOM付きのCSVダウンロードするには、 2通りの方法がある。 ・Custom File Formatter を使う方法 ・Format Data Before Download を定義する方法 いずれも、対策するためにカスタマイズする方法を示したマニュアルが http://tab…
Handsontable で、任意にキーと値(value)を入力して、それをJSONテキストにするのと、任意の入力URLに送信するもの。用意するもの。Handsontable は、コミュニティ版で充分、https://handsontable.com/JSON の jQueryプラグイン GitHub - Krinkle/jquer…
久々に Handsontable に触れる。 3年程前、2014 年のバージョンの Handsontable のコンテキストメニューは、行削除、列削除を組み込んだ時、 最後の1行、1列は、削除できないように、以下のように disabled キーの関数コーディングをする必要があった。 v…
Handsontable の Autocomplete の悪いところは、ローマ字変換のキー入力では思惑どおりに働かないところである。 jQuery UIではそんなことは起きない。 Handsontable は、ここで、全角入力モードにして、「si」 とキーを打つと、、 となってしまう。 これは…
Handsontable の Dropdown は、デフォルトでは選択リストに定義した以外の入力は、validation が働いて、 セルの背景色が赤くなる。 Dropdown と呼ばれても、内部では autocomplete ということなのであるが、select の性質から、バリデーションが着いている…
Handsontable のデフォルトの罫線などの色を変えるCSS 配布されてるデザインだと罫線の色はグレー、ヘッダのセルの背景色などを変更したい場合、 デモサイトの、条件による動的にスタイルシートの変更を jQuery で動的に実行する方法もあるだろうが、 やはり…