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 自定义右键菜单如下：
声明：1、本博客不从事任何主机及服务器租赁业务，不参与任何交易，也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动，信息均摘自网络或来自服务商主动提供；所以对本博客提及的内容不作直接、间接、法定、约定的保证，博客内容也不具备任何参考价值及引导作用，访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则；不能利用本博客所提及的内容从事任何违法、违规操作；否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客，即表示您已经知晓并接受了以上声明通告。
