【性价之王】	【线路之王】	【价格之王】	【配置之王】
【免费之王】	【香港首推】	【梯子之王】	【独服之王】

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.erence(data.erence);       obj = inst.get_node(data.erence);       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.erence(data.erence);       var obj = inst.get_node(data.erence);       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.erence(data.erence);       obj = inst.get_node(data.erence);       layer.confirm('确认要删除该分组吗？', {         btn: ['确认','取消'] //按钮       }, function(){         //ajax delete;        });       }, function(){         layer.closeAll();       });      }     }   } } })

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