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自定义右键菜单如下:
评论前必须登录!
立即登录 注册