読者です 読者をやめる 読者になる 読者になる

Handsontable コンテキストメニューで注意すべきこと

Handsontable コンテキストメニューで、行削除や列削除をデモサイトにあるようなサンプルのままだと、
最後1行、あるいは、最後の1列が残った後にコンテキストメニューで実行してまうと、テーブルでコンテキストメニューを開く領域がなくなってしまう。(→当然である。)

そこで、残り1行、1列になった時にコンテキストメニューは、disable 状態にしなければならない。
以下のようにする必要がある。

f:id:posturan:20160313191410j:plain


http://blog.zaq.ne.jp/oboe2uran/article/1011/ ← ここで書いたものは、更に、以下のように、コンテキストメニュー定義の中で、
 disabled 属性でメソッドboolean を返すものを作成する必要がある。

注意すべき、そのメソッドを作ると
コンテキストメニューを表示する都度、そのメソッドが実行されることである。


以下のように用意する。

var container = $('#example').handsontable({
   data: data,
   minSpareRows: 1,
   colHeaders: true,
   contextMenu: { items: { 'row_above': { name: '1行挿入、上に' } ,
                           'hsep1': "---------",
                           'col_left':  { name: '1列挿入、左に' } ,
                           "hsep2": "---------",
                           'remove_row': { name: '行削除' , disabled: function(){ return container.handsontable('countRows') <= 2; },
                           'remove_col': { name: '列削除' , disabled: function(){ return container.handsontable('countCols') <= 1; },
                           "hsep3": "---------",
                           'undo': { name: '戻る' } ,
                           'redo': { name: 'やり直す'   } ,
                  }
   } ,
});

=============
var container変数で作成した handsontable
を参照可能しておいて、

remove_rowremove_col の
disabled 属性として、boolean を返す関数を定義する。
属性だから、コンテキストメニュー表示時に実行されてしまうので
あまり重い処理を書くべきでない。

minSpareRows: 1, のテーブルだから、カウントを1つ余計に見て、<=2 で、行削除は抑制している。

Handsontable のメソッド説明を見てこの方法に行き着いた。

Handsontable のメソッドの実行方法は、.xxx() と書くのではなく、
シングルクォートで括ったメソッド名、パラメータを並べる
書き方で、独特なので、知っていないと書けない。