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的右键菜单了哈！