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

jsTree 专栏收录该内容
8 篇文章 0 订阅

概述:现在有需求要在不同节点显示不同右键菜单,只知道初始设置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

  • 0
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值