未分类

Bootstrap风格的zTree右键菜单_javascript技巧_脚本之家

17 3月 , 2020  

备注:

function onExpandFun(event, treeId, treeNode) { /* 展开当前节点执行的代码.... *///绑定当前展开节点的子节点右击事件 initzTreeRightMenu; //treeNode.tId 是当前展开节点的ID}

3、在页面初始化zTree之后,调用上面的方法:initzTreeRightMenu; //
‘#schemaMgrTree’ 是我自己项目的zTree容器ID

1、引入zTree相关js、css文件(以我自己的项目为例:jquery.ztree.all-3.5.min.js,zTreeStyle.css);

2、将上面给出的右键菜单插件另存为js文件引入页面(以我自己的项目为例:bsContextmenu.js)

    刷新  将数据库复制到不同的主机/数据库 创建数据库 改变数据库 新数据搜索 创/建 更多数据库操作  备份/导出 导入  在创建数据库架构HTML      将数据库复制到不同的主机/数据库 创建数据库 改变数据库 新数据搜索 创/建 更多数据库操作  备份/导出 导入  在创建数据库架构HTML    创建表 将表复制到不同的主机/数据库 数据搜索  计划备份 备份表作为SQL转储 

/* 右键菜单 - start */ .dropdown-menu .dropdown-menu { position: absolute; top: -9px; left: 100%; } .dropdown-menu li { position: relative; } .dropdown-menu li.hasChildren:before { content: ''; position: absolute; top: 50%; right: 8px; width: 0; height: 0; margin-top: -5px; border-style: solid; border-color: transparent transparent transparent rgba; border-width: 5px 0 5px 5px; pointer-events: none; } .dropdown-menu li.hasChildren:hover > .dropdown-menu { display: block; } /* 右键菜单 - end */

/* 以下为右键菜单插件 */; { 'use strict'; /* CONTEXTMENU CLASS DEFINITION * ============================ */ var toggle = '[data-toggle="context"]'; var ContextMenu = function  { this.$element = $; this.before = options.before || this.before; this.onItem = options.onItem || this.onItem; this.scopes = options.scopes || null; if  { this.$element.data('target', options.target); } this.listen(); }; ContextMenu.prototype = { constructor: ContextMenu , show: function  { var $menu , evt , tp , items , relatedTarget = {relatedTarget: this, target: e.currentTarget}; if  return; this.closemenu(); if (this.before.call(this, e, $ === false) return; $menu = this.getMenu(); $menu.trigger(evt = $.Event('show.bs.context', relatedTarget)); tp = this.getPosition; items = 'li:not'; $menu.attr .addClass .on('click.context.data-api', items, $.proxy(this.onItem, this, $ .trigger('shown.bs.context', relatedTarget); // Delegating the `closemenu` only on the currently opened menu. // This prevents other opened menus from closing. $ .on('click.context.data-api', $menu.selector, $.proxy); return false; } , closemenu: function  { var $menu , evt , items , relatedTarget; $menu = this.getMenu(); if (!$menu.hasClass return; relatedTarget = {relatedTarget: this}; $menu.trigger(evt = $.Event('hide.bs.context', relatedTarget)); items = 'li:not'; $menu.removeClass .off('click.context.data-api', items) .trigger('hidden.bs.context', relatedTarget); $ .off('click.context.data-api', $menu.selector); // Don't propagate click event so other currently // opened menus won't close. if  { e.stopPropagation(); } } , keydown: function  { if  this.closemenu; } , before: function  { return true; } , onItem: function  { return true; } , listen: function () { this.$element.on('contextmenu.context.data-api', this.scopes, $.proxy; $.on('click.context.data-api', $.proxy); $.on('keydown.context.data-api', $.proxy; } , destroy: function () { this.$element.off.removeData.off; } , isDisabled: function () { return this.$element.hasClass || this.$element.attr; } , getMenu: function () { var selector = this.$element.data , $menu; if  { selector = this.$element.attr; selector = selector && selector.replace/, ''); //strip for ie7 } $menu = $; return $menu && $menu.length ? $menu : this.$element.find; } , getPosition: function  { var mouseX = e.clientX , mouseY = e.clientY , boundsX = $ , boundsY = $ , menuWidth = $menu.find.outerWidth() , menuHeight = $menu.find.outerHeight() , tp = {"position": "absolute", "z-index": 9999} , Y, X, parentOffset; if (mouseY + menuHeight > boundsY) { Y = {"top": mouseY - menuHeight + $}; } else { Y = {"top": mouseY + $}; } if ((mouseX + menuWidth > boundsX) &&  > 0)) { X = {"left": mouseX - menuWidth + $}; } else { X = {"left": mouseX + $}; } // If context-menu's parent is positioned using absolute or relative positioning, // the calculated mouse position will be incorrect. // Adjust the position of the menu by its offset parent position. parentOffset = $menu.offsetParent; X.left = X.left - parentOffset.left; Y.top = Y.top - parentOffset.top; return $.extend; } }; /* CONTEXT MENU PLUGIN DEFINITION * ========================== */ $.fn.contextmenu = function  { return this.each { var $this = $ , data = $this.data , options = (typeof option == 'object') && option; if  $this.data('context', (data = new ContextMenu; if (typeof option == 'string') data[option].call; }; $.fn.contextmenu.Constructor = ContextMenu; /* APPLY TO STANDARD CONTEXT MENU ELEMENTS * =================================== */ $ .on('contextmenu.context.data-api', function .each { var data = $; if  return; data.closemenu .on('contextmenu.context.data-api', toggle, function .contextmenu; e.preventDefault(); e.stopPropagation;

/* 以下方法是通过上面的js插件封装的方法 *//* parentNode*/function initzTreeRightMenu { //树形菜单右击事件 $('li, a', $.contextmenu({ target: '#zTreeRightMenuContainer', //此设置项是zTree的容器 before: function  { //当前右击节点ID var selectedId = element[0].tagName == 'LI' ? element.attr : element.parent; //根据节点ID获取当前节点详细信息 curSelectNode = zTreeObj.getNodeByTId; //当前节点的层级 var level = curSelectNode.level; level = 0; //选中当前右击节点 zTreeObj.selectNode; //根据当前节点层级显示相应的菜单 $('#zTreeRightMenuContainer ul.dropdown-menu[level="' + level + '"]').removeClass.addClass; }, onItem: function  { var action = $.attr; this.closemenu { zTreeRightMenuFuns[action];}

www6766com ,1、假如zTree中有异步载入的节点(以我自己项目为例:zTree中有部分节点是展开了父节点之后才加载的,像这种情况则需要在
zTree 的 onExpandFun 里面绑定当前节点的子节点)

以上所述是小编给大家介绍的Bootstrap风格的zTree右键菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

步骤:


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图