jsTree自定义右键菜单方法

jsTree是一款功能非常强大的jquery树目录插件，基于mit开源协议，完全免费。

jsTree通过添加Contextmenu plugin这个扩展来实现树目录右键菜单操作，默认右键菜单如下：

通过上图可以看到，默认右键菜单是英文版，如果开发过程中有特殊需求的话，我们可以通过重写contextmenu属性来自定义jsTree右键菜单方法，具体代码如下：

$('#tree')
.jstree({
  'core' : {
   'data' : {
    'url' : '/admin/Group/jstree' //ajax加载菜单数据
   },
   'themes' : {
    'responsive' : true
   }
  },
  'plugins' : ['dnd','contextmenu'],//通过添加contextmenu扩展来实现右键菜单操作
  "contextmenu": {//重写contextmenu菜单
   "items": {
    "create": null,
    "rename": null,
    "remove": null,
    "ccp": null,
    "add": {
     "label": "新增分组",
     "action": function (data) {
      var inst = jQuery.jstree.reference(data.reference);
      obj = inst.get_node(data.reference);
      layer.open({
        type: 2,
        title: '新增['+obj.text+']的子组',
        shadeClose: true,
        shade: 0.8,
        area: ['380px', '300px'],
        content: '/admin/Group/add/id/'+obj.id //iframe的url
      });
     }
    },
    "edit": {
     "label": "修改分组",
     "action": function (data) {
      var inst = jQuery.jstree.reference(data.reference);
      var obj = inst.get_node(data.reference);
      var type = obj.id.substr(0,4);
      if(type == 'root'){
       layer.msg('根节点无法修改',{'time':2000,'icon':2});
       return;
      }
      if(type == 'list'){
       layer.msg('考核对象分组请在系统设置-指标分组权限列表中修改',{'icon':2});
       return;
      }
      layer.open({
        type: 2,
        title: '修改['+obj.text+']的子组',
        shadeClose: true,
        shade: 0.8,
        area: ['380px', '300px'],
        content: '/admin/Group/edit/id/'+obj.id //iframe的url
      });
     }
    },
    "del": {
     "label": "删除分组",
     "action": function (data) {
      var inst = jQuery.jstree.reference(data.reference);
      obj = inst.get_node(data.reference);
      layer.confirm('确认要删除该分组吗？', {
        btn: ['确认','取消'] //按钮
      }, function(){
        //ajax delete;
       });
      }, function(){
        layer.closeAll();
      });
     }
    }
  }
}
})

最终实现的jsTree自定义右键菜单如下：