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右键菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！