handsontable如何重寫右鍵選單(contextmenu)

在使用handsontable的過程中，想必大家一定有右鍵選單的需求吧，那麼如何使用handsontable的右鍵選單功能呢？

1，使用handsontable預設的右鍵選單

contextMenu: true

沒錯，就這麼一個簡單的引數就可以了，效果上圖：

參照官方文件那個地址：http://docs.handsontable.com/0.16.1/demo-context-menu.html

但是這個效果並不好看，而且很多功能我們也用不到，有些想要的功能這裡也沒有，那麼我們又該如何定製自己的個性化選單呢？

2，使用預設的contextmenu引數配置

contextMenu: {
      callback: function (key, options) {
        if (key === 'about') {
          setTimeout(function () {
            alert("This is a context menu with default and custom options mixed");
          }, 100);
        }
      },
      items: {
        "row_above": {
          disabled: function () {
            return hot3.getSelected()[0] === 0;
          }
        },
        "row_below": {},
        "hsep1": "---------",
        "remove_row": {
          name: 'Remove this row, ok?',
          disabled: function () {
            // if first row, disable this option
            return hot3.getSelected()[0] === 0
          }
        },
        "hsep2": "---------",
        "about": {name: 'About this menu'}
      }
    }

效果圖如下：

參照文件：http://docs.handsontable.com/0.16.1/demo-context-menu.html

但是這個右鍵選單的樣式啥的都蠻老的，要想和自己的專案切合，最簡單粗暴的就是修改樣式，但是如果我就想用自己的選單呢，怎麼辦？

3，如何用自己的選單替換handsontable的預設選單

其實說起來也不難，重寫唄！

var contextmenu = this.htable.getPlugin("contextMenu");
			contextmenu.eventManager.addEventListener(this.htable.rootElement, 'contextmenu', (function(event) {
				    event.preventDefault();
				    showmenu();//自己的選單
			    }));

就是這麼簡單粗暴，這樣你就可以完完全全的接管handsontable的右鍵選單了哈！