Bootstrap风格的zTree右键菜单
HTML:
<%--右键菜单--%> <divid="zTreeRightMenuContainer"style="z-index:9999;"> <%--层级0--%> <ulclass="dropdown-menu"role="menu"level="0"> <%--通过给菜单项添加样式“hasChildren”并在li标签下添加菜单结构即可扩展子级菜单--%> <liclass="hasChildren"><atabindex="-1"action="refreshzTreeObj">刷新</a> <ulclass="dropdown-menu"role="menu"level="1"> <li><atabindex="-1">将数据库复制到不同的主机/数据库</a></li> <li><atabindex="-1">创建数据库</a></li> <li><atabindex="-1">改变数据库</a></li> <li><atabindex="-1">新数据搜索</a></li> <li><atabindex="-1">创/建</a></li> <li><atabindex="-1">更多数据库操作</a></li> <liclass="divider"></li> <li><atabindex="-1">备份/导出</a></li> <li><atabindex="-1">导入</a></li> <liclass="divider"></li> <li><atabindex="-1">在创建数据库架构HTML</a></li> </ul> </li> </ul> <%--层级1--%> <ulclass="dropdown-menu"role="menu"level="1"> <li><atabindex="-1">将数据库复制到不同的主机/数据库</a></li> <li><atabindex="-1">创建数据库</a></li> <li><atabindex="-1">改变数据库</a></li> <li><atabindex="-1">新数据搜索</a></li> <li><atabindex="-1">创/建</a></li> <li><atabindex="-1">更多数据库操作</a></li> <liclass="divider"></li> <li><atabindex="-1">备份/导出</a></li> <li><atabindex="-1">导入</a></li> <liclass="divider"></li> <li><atabindex="-1">在创建数据库架构HTML</a></li> </ul> <%--层级2--%> <ulclass="dropdown-menu"role="menu"level="2"> <li><atabindex="-1">创建表</a></li> <li><atabindex="-1">将表复制到不同的主机/数据库</a></li> <li><atabindex="-1">数据搜索</a></li> <liclass="divider"></li> <li><atabindex="-1">计划备份</a></li> <li><atabindex="-1">备份表作为SQL转储</a></li> </ul> </div>
CSS:
/*右键菜单-start*/ .dropdown-menu.dropdown-menu{ position:absolute; top:-9px; left:100%; } .dropdown-menuli{ position:relative; } .dropdown-menuli.hasChildren:before{ content:''; position:absolute; top:50%; right:8px; width:0; height:0; margin-top:-5px; border-style:solid; border-color:transparenttransparenttransparentrgba(0,0,0,0.5); border-width:5px05px5px; pointer-events:none; } .dropdown-menuli.hasChildren:hover>.dropdown-menu{ display:block; } /*右键菜单-end*/
JS:
/*以下为右键菜单插件(Bootstrap风格)*/ ;(function($){ 'usestrict'; /*CONTEXTMENUCLASSDEFINITION *============================*/ vartoggle='[data-toggle="context"]'; varContextMenu=function(element,options){ this.$element=$(element); this.before=options.before||this.before; this.onItem=options.onItem||this.onItem; this.scopes=options.scopes||null; if(options.target){ this.$element.data('target',options.target); } this.listen(); }; ContextMenu.prototype={ constructor:ContextMenu ,show:function(e){ var$menu ,evt ,tp ,items ,relatedTarget={relatedTarget:this,target:e.currentTarget}; if(this.isDisabled())return; this.closemenu(); if(this.before.call(this,e,$(e.currentTarget))===false)return; $menu=this.getMenu(); $menu.trigger(evt=$.Event('show.bs.context',relatedTarget)); tp=this.getPosition(e,$menu); items='li:not(.divider)'; $menu.attr('style','') .css(tp) .addClass('open') .on('click.context.data-api',items,$.proxy(this.onItem,this,$(e.currentTarget))) .trigger('shown.bs.context',relatedTarget); //Delegatingthe`closemenu`onlyonthecurrentlyopenedmenu. //Thispreventsotheropenedmenusfromclosing. $('html') .on('click.context.data-api',$menu.selector,$.proxy(this.closemenu,this)); returnfalse; } ,closemenu:function(e){ var$menu ,evt ,items ,relatedTarget; $menu=this.getMenu(); if(!$menu.hasClass('open'))return; relatedTarget={relatedTarget:this}; $menu.trigger(evt=$.Event('hide.bs.context',relatedTarget)); items='li:not(.divider)'; $menu.removeClass('open') .off('click.context.data-api',items) .trigger('hidden.bs.context',relatedTarget); $('html') .off('click.context.data-api',$menu.selector); //Don'tpropagateclickeventsoothercurrently //openedmenuswon'tclose. if(e){ e.stopPropagation(); } } ,keydown:function(e){ if(e.which==27)this.closemenu(e); } ,before:function(e){ returntrue; } ,onItem:function(e){ returntrue; } ,listen:function(){ this.$element.on('contextmenu.context.data-api',this.scopes,$.proxy(this.show,this)); $('html').on('click.context.data-api',$.proxy(this.closemenu,this)); $('html').on('keydown.context.data-api',$.proxy(this.keydown,this)); } ,destroy:function(){ this.$element.off('.context.data-api').removeData('context'); $('html').off('.context.data-api'); } ,isDisabled:function(){ returnthis.$element.hasClass('disabled')|| this.$element.attr('disabled'); } ,getMenu:function(){ varselector=this.$element.data('target') ,$menu; if(!selector){ selector=this.$element.attr('href'); selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,'');//stripforie7 } $menu=$(selector); return$menu&&$menu.length?$menu:this.$element.find(selector); } ,getPosition:function(e,$menu){ varmouseX=e.clientX ,mouseY=e.clientY ,boundsX=$(window).width() ,boundsY=$(window).height() ,menuWidth=$menu.find('.dropdown-menu').outerWidth() ,menuHeight=$menu.find('.dropdown-menu').outerHeight() ,tp={"position":"absolute","z-index":9999} ,Y,X,parentOffset; if(mouseY+menuHeight>boundsY){ Y={"top":mouseY-menuHeight+$(window).scrollTop()}; }else{ Y={"top":mouseY+$(window).scrollTop()}; } if((mouseX+menuWidth>boundsX)&&((mouseX-menuWidth)>0)){ X={"left":mouseX-menuWidth+$(window).scrollLeft()}; }else{ X={"left":mouseX+$(window).scrollLeft()}; } //Ifcontext-menu'sparentispositionedusingabsoluteorrelativepositioning, //thecalculatedmousepositionwillbeincorrect. //Adjustthepositionofthemenubyitsoffsetparentposition. parentOffset=$menu.offsetParent().offset(); X.left=X.left-parentOffset.left; Y.top=Y.top-parentOffset.top; return$.extend(tp,Y,X); } }; /*CONTEXTMENUPLUGINDEFINITION *==========================*/ $.fn.contextmenu=function(option,e){ returnthis.each(function(){ var$this=$(this) ,data=$this.data('context') ,options=(typeofoption=='object')&&option; if(!data)$this.data('context',(data=newContextMenu($this,options))); if(typeofoption=='string')data[option].call(data,e); }); }; $.fn.contextmenu.Constructor=ContextMenu; /*APPLYTOSTANDARDCONTEXTMENUELEMENTS *===================================*/ $(document) .on('contextmenu.context.data-api',function(){ $(toggle).each(function(){ vardata=$(this).data('context'); if(!data)return; data.closemenu(); }); }) .on('contextmenu.context.data-api',toggle,function(e){ $(this).contextmenu('show',e); e.preventDefault(); e.stopPropagation(); }); }(jQuery));
/*以下方法是通过上面的js插件封装的方法*/ /* parentNode(zTree容器||指定的节点) */ functioninitzTreeRightMenu(parentNode){ //树形菜单右击事件 $('li,a',$(parentNode)).contextmenu({ target:'#zTreeRightMenuContainer',//此设置项是zTree的容器 before:function(e,element,target){ //当前右击节点ID varselectedId=element[0].tagName=='LI'?element.attr('id'):element.parent().attr('id'); //根据节点ID获取当前节点详细信息 curSelectNode=zTreeObj.getNodeByTId(selectedId); //当前节点的层级 varlevel=curSelectNode.level; level=0; //选中当前右击节点 zTreeObj.selectNode(curSelectNode); //根据当前节点层级显示相应的菜单 $('#zTreeRightMenuContainerul.dropdown-menu[level="'+level+'"]').removeClass('hide').siblings().addClass('hide'); }, onItem:function(context,e){ varaction=$(e.target).attr('action'); this.closemenu(); if(action){ zTreeRightMenuFuns[action](); } } }); }
步骤:
1、引入zTree相关js、css文件(以我自己的项目为例:jquery.ztree.all-3.5.min.js,zTreeStyle.css);
2、将上面给出的右键菜单插件另存为js文件引入页面(以我自己的项目为例:bsContextmenu.js)
3、在页面初始化zTree之后,调用上面的方法:initzTreeRightMenu('#schemaMgrTree'); //‘#schemaMgrTree'是我自己项目的zTree容器ID
备注:
1、假如zTree中有异步载入的节点(以我自己项目为例:zTree中有部分节点是展开了父节点之后才加载的,像这种情况则需要在zTree的onExpandFun里面绑定当前节点的子节点)
functiononExpandFun(event,treeId,treeNode){ /*展开当前节点执行的代码....*///绑定当前展开节点的子节点右击事件 initzTreeRightMenu('#'+treeNode.tId);//treeNode.tId是当前展开节点的ID }
以上所述是小编给大家介绍的Bootstrap风格的zTree右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!