jsTree 不同节点不同右键菜单

公司系统中有个菜单管理的模块，用到了 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
}

参考代码

demo