jsTree 不同节点不同右键菜单
Jul 23, 2018
公司系统中有个菜单管理的模块,用到了 jsTree 的右键菜单功能,但是有个问题,就是菜单只有两级,一级菜单允许添加子菜单,二级菜单不允许添加子菜单,这就需要根据选中的菜单渲染不同的右键菜单。网上找了一番,在 这里 找到了解决方法。我在自己博客再记录一次,为了加深印象,也为了日后方便查找。
引入资源
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> |
用于初始化的 DOM 节点
1 | <div id="jstree_demo_div"></div> |
初始化
1 | //模拟数据 |
不同右键菜单的关键
这个函数是让 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
27function 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
}