公司系统中有个菜单管理的模块,用到了 jsTree 的右键菜单功能,但是有个问题,就是菜单只有两级,一级菜单允许添加子菜单,二级菜单不允许添加子菜单,这就需要根据选中的菜单渲染不同的右键菜单。网上找了一番,在 这里 找到了解决方法。我在自己博客再记录一次,为了加深印象,也为了日后方便查找。

引入资源

1
2
3
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

用于初始化的 DOM 节点

1
<div id="jstree_demo_div"></div>

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//模拟数据
var DATA = [{
"id": "276",
"text": "分析",
"parent_id": "0",
"children": [{
"parent_id": "276",
"id": "281",
"text": "监测概况"
}]
}]
//初始化
$(function () {
$('#jstree_demo_div').jstree({
core: {
'data': DATA, //数据
},
'contextmenu': {
'items': customMenu //右键点击触发的函数,下面会讲到
},
'plugins': ['contextmenu'] //右键菜单插件,必须加载这个插件才能使用右键菜单
})
})

不同右键菜单的关键

这个函数是让 jsTree 有不同右键菜单的关键,当右键点击的时候,会执行这个函数,我们只要根据某个参数来判断当前是什么菜单,然后根据这个菜单来 return 右键菜单的对象就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function customMenu(node) {
var items = {
"new": {
"label": "新建子菜单",
"action": function (data) {
// code...
}
},
"edit": {
"label": "编辑菜单",
"action": function (data) {
// code...
}
},
"delete": {
"label": "删除菜单",
"action": function (data) {
// code...
}
}
}
// parent_id 为 0 的是一级菜单
if(node.original.parent_id !== '0'){
delete items.new
}
return items
}

参考代码