はしくれSEめも

SEに必要情報をめも程度に残していこうと思っています。

【Handsontable】contextMenu コンテキストメニュー コピー&ペースト

f:id:coogi-se:20210804235542p:plain

コンテキストメニュー

Handsontable(ハンズオンテーブル)では、コンテキストメニューに標準でコピーとペースト(貼付け)のコマンドがない。 はしくれSEとしては、Ctrl+C、Ctrl+Vで問題ないが、以外にショートカットを知らない人もいる。 なので、はしくれSEとしてはコンテキストメニューにコピーとペースト(貼付け)のコマンドを用意してあげたい。

コンテキストメニューとは
マウスの右クリックなどで表示されるメニューのことです。

以下のようなものを作ってみました。
たぶん、そのままコピペで動くと思います。

$(function(){
  
  var data = [
    ["", "Ford", "Tesla", "Toyota", "Honda"],
    ["2017", 10, 11, 12, 13],
    ["2018", 20, 11, 14, 13],
    ["2019", 30, 15, 12, 13]
  ];
  var container = document.getElementById('example');

  var clipboardCache = "";
  var hot = new Handsontable(container, {
    data: data,
  
    // コンテキストメニューの使用
    contextMenu: true,
    
    // コンテキストメニューの定義
    contextMenu: {
      items: {
        'copy': {
          name: 'コピー',
        },
        'paste': {
          name: '貼り付け',
          disabled: function() {
            return clipboardCache.length === 0;
          },
          callback: function() {
            var plugin = this.getPlugin('copyPaste');
            this.listen();
            plugin.paste(clipboardCache);
            return true;
          }
        },
      }
    },
    afterCopy: function(changes) {
        clipboardCache = stringify(changes);
    },
  });
});

/**
 * handsontable用にペーストできるよう
 * コピーデータを加工
 */
function stringify(arr) {
  var r, rLen, c, cLen, str = '', val;

  for (r = 0, rLen = arr.length; r < rLen; r += 1) {
    cLen = arr[r].length;

    for (c = 0; c < cLen; c += 1) {
      if (c > 0) {
        str += '\t';
      }
      val = arr[r][c];

      if (typeof val === 'string') {
        if (val.indexOf('\n') > -1) {
          str += '"' + val.replace(/"/g, '""') + '"';
        }else {
          str += val;
        }
      }else if (val === null || val === void 0) { // void 0 resolves to undefined
        str += '';
      }else {
        str += val;
      }
    }

    if (r !== rLen - 1) {
      str += '\n';
    }
  }

  return str;
}

関連記事

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com

coogi-memo.hatenablog.com