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

Handsontable コンテキストメニューを日本語化

Handsontableコンテキストメニューの見出しを日本語にする場合は、以下のようにする。

contextMenu 属性の items は、Handsontable で約束された動作が、
キーとして以下のように定義されているので、このキーに対する
「name」属性が、コンテキストメニュー表示部分なので、
name属性を日本語で書き直す。


という作業をすれば良い。

Handsontable で約束されたキーは、以下のとおり。

row_above   1行挿入 above
row_below   1行挿入 below
hsep1     セパレータ
col_left     1列挿入 left
col_right    1列挿入 right
hsep2     セパレータ
remove_row    行削除
remove_col    列削除
hsep3     セパレータ
undo       アンドゥ
redo       リドゥ

以下のように、コンテキストメニューを日本語化する場合、

f:id:posturan:20160313191819j:plain



次のように contextMenu , items , name を指定する。


$(function(){
   var data = [
      ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
      ["2009", 0, 2941, 4303, 354, 5814],
      ["2010", 5, 2905, 2867, 412, 5284],
      ["2011", 4, 2517, 4822, 552, 6127],
      ["2012", 2, 2422, 5399, 776, 4151],
   ];
   $('#example').handsontable({
      data: data,
      minSpareRows: 1,
      colHeaders: true,
      contextMenu: { items: { 'row_above': { name: '1行挿入、上に' },
                              'row_below': { name: '1行挿入、下に' },
                              'hsep1': "---------",
                              'col_left':  { name: '1列挿入、左に' },
                              'col_right': { name: '1列挿入、右に' },
                              "hsep2": "---------",
                              'remove_row': { name: '行削除' },
                              'remove_col': { name: '列削除' },
                              "hsep3": "---------",
                              'undo': { name: '戻る' },
                              'redo': { name: 'やり直す'   },
                     }
      }
   });
});