/* 以下方法是通过上面的js插件封装的方法 */ /* parentNode（zTree容器 || 指定的节点） */ function initzTreeRightMenu(parentNode) { //树形菜单右击事件 $('li, a', $(parentNode)).contextmenu({ target: '#zTreeRightMenuContainer', //此设置项是zTree的容器 before: function (e, element, target) { //当前右击节点ID var selectedId = element[0].tagName == 'LI' ? element.attr('id') : element.parent().attr('id'); //根据节点ID获取当前节点详细信息 curSelectNode = zTreeObj.getNodeByTId(selectedId); //当前节点的层级 var level = curSelectNode.level; level = 0; //选中当前右击节点 zTreeObj.selectNode(curSelectNode); //根据当前节点层级显示相应的菜单 $('#zTreeRightMenuContainer ul.dropdown-menu[level="' + level + '"]').removeClass('hide').siblings().addClass('hide'); }, onItem: function (context, e) { var action = $(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 里面绑定当前节点的子节点）
function onExpandFun(event, treeId, treeNode) { /* 展开当前节点执行的代码.... *///绑定当前展开节点的子节点右击事件 initzTreeRightMenu('#' + treeNode.tId); //treeNode.tId 是当前展开节点的ID }
以上所述是小编给大家介绍的Bootstrap风格的zTree右键菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: