jsTree如何让不同的节点有不同的右键菜单

概述：现在有需求要在不同节点显示不同右键菜单，只知道初始设置contextmenu，从来没有重新修改右键菜单。

刚开始以为可以在加载完就可以自动修改右键菜单选项，然后通过右键事件，发现不可以，这就尴尬。。。。幸好到stackoverflow找到思路和答案。

1、思路：

它其实是对每个节点（node）设置右键菜单的（context），这是在加载的时候完成的，也就是加载之后就不会改变，除非修改源码，也就是我们加载时候就应该区别不同节点应该是什么右键菜单（context），这时候我们可以将节点进行分类，可以使用jstree的插件 types来进行分类，对不同类采用不同右键菜单。

2、先决条件：

下载jquery或者在线加载：https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js

下载jstree插件：https://www.jstree.com/   

3、编写代码

3.1、引用css样式

<link rel="stylesheet"
	href="../jstree/themes/default/style.min.css"></link> //这个引用自己文件路径

3.2、引用js

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="../jstree/jstree.js"></script>  //这个引用自己文件路径

3.3、html标签

<div id="jstree"></div>

3.4、自定义js

<script type="text/javascript">
$('#jstree').jstree({
	'core' :{
		'data' : [
		          { "id" : "ajson1", "parent" : "#", "text" : "Simple root node","type":"level_1" },
		          { "id" : "ajson2", "parent" : "#", "text" : "Root node 2","type":"level_1"  },
		          { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1","type":"level_2"  },
		          { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" ,"type":"level_2" },
		       ]
	},
    'contextmenu' : {
        'items' : customMenu     //每个节点都会调用这个函数
    },
    'plugins' : ['contextmenu', 'types'],
    'types' : {
        '#' : {  },
        'level_1' : {  },
        'level_2' : { }
       
    }
});
function customMenu(node)
{
    var items = {
        'item1' : {
            'label' : '父节点',
            'action' : function () { /* 写点击处理函数 */ }
        },
        'item2' : {
            'label' : '子节点',
            'action' : function () { /*写点击处理函数*/ }
        }
    }

    if (node.type === 'level_1') {
        delete items.item2;  //删除节点 items
    } else if (node.type === 'level_2') {
        delete items.item1;  //删除节点 items
    }

    return items;
}
</script>

总结：

1、引用jstree的插件types将节点进行分类。也就是在每个节点上设置type属性

2、右键菜单对于每个节点都会创建一遍，所以可以通过节点判断它type属性来确定右键菜单

3、首先我们会将所有选项都罗列出来，根据不同type，删除不同的选项，以此来达到可变的右键菜单

为了方便我采用是写死的json字符串

4、效果

参考地址：https://stackoverflow.com/questions/4559543/configuring-jstree-right-click-contextmenu-for-different-node-types