zTree结合jquery.contextMenu.js实现右键菜单
来源：互联网 发布：如何做一个软件平台 编辑：程序博客网 时间：2024/05/02 12:27
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html><html><head></head><body><link rel="stylesheet" href="<%=request.getContextPath()%>/js/diy/zTreeDiy.css" /><link href="<%=request.getContextPath()%>/js/contextmenu/jquery.contextMenu.css" rel="stylesheet" type="text/css" /><script src="<%=request.getContextPath()%>/js/contextmenu/jquery.contextMenu.js" type="text/javascript"></script><script src="<%=request.getContextPath()%>/js/contextmenu/jquery.ui.position.min.js" type="text/javascript"></script><style type="text/css"> .context-menu-list { position: absolute; display: inline-block; min-width: 85px; max-width: 85px; padding: 4px 0; margin: 5px; font-family: inherit; font-size: inherit; list-style-type: none; background: #fff; border: 1px solid #bebebe; border-radius: 3px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5); box-shadow: 0 2px 5px rgba(0, 0, 0, .5); } </style><script type="text/javascript"> var zTree; var demoIframe; var selectNode; var flag=true; var setting = { view: { dblClickExpand: false, showLine: true,//节点之间的连线 selectedMulti: false,//是否可以多选 expandSpeed: "slow",//节点展开动画速度 addHoverDom: addHoverDom, removeHoverDom: removeHoverDom }, edit: { enable: true, editNameSelectAll: true, showRemoveBtn: showRemoveBtn, removeTitle: "删除岗位", showRenameBtn: showRenameBtn, renameTitle: "编辑岗位" }, async:{ autoParam:["sRoleid"],//点击节点进行异步加载时默认发送参数 dataType:"json", enable:true, type:"post", url:"<%=request.getContextPath()%>/login/post/getzTreeOrgPostData.do" }, data: { key:{ name:"sRolename"//节点显示的字段 }, simpleData : { enable : true, idKey : "sRoleid", // id pIdKey : "sParentroleid", // 父id rootPId : 0//根节点 }, keep:{ parent: true //始终保持为可展开状态 } }, callback: { onClick:function(event, treeId, treeNode, msg){ selectNode=treeNode; var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.expandNode(treeNode, true, false, true); if("root" != treeNode.sRoleid){ demoIframe.attr('src','<%=request.getContextPath()%>/login/post/showOrgPostUserRelationListPageYes.do?sRoleid='+treeNode.sRoleid); } }, beforeEditName:beforeEditName, beforeRemove: beforeRemove, onAsyncSuccess:function(event, treeId, treeNode, msg){//数据加载完成后执行 var treeObj = $.fn.zTree.getZTreeObj(treeId); var nodes = treeObj.getNodes(); if(flag){ treeObj.expandNode(nodes[0], true, false, true); flag=false; } }, beforeRightClick:function(treeId, treeNode){ if(null ==treeNode){ return; } var id=treeNode.tId; var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.selectNode(treeNode); $.contextMenu({ selector: '#'+id+"_a", className: 'css-title', build: function($trigger, e) { return { callback: function(key, options) { var m = "clicked: " + treeNode.sRoleid; alert(m); }, items: { "add": {name: "新增", icon: "add", disabled: function(){ return false; } }, "edit": {name: "修改", icon: "edit"}, "delete": {name: "删除", icon: "delete"} } }; } }); return false; } } }; $(document).ready(function(){ var t = $("#tree"); t = $.fn.zTree.init(t, setting); $("#treeDiv").height($(window).height()-120); $("#iframeDiv").height($(window).height()-120); demoIframe = $("#testIframe"); }); function addHoverDom(treeId, treeNode) {//鼠标滑过后显示图标按钮 var sObj = $("#" + treeNode.tId + "_span"); if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增下级岗位' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) { btn.bind("click", function(){ beforeAddName(treeNode.tId); }); } }; function removeHoverDom(treeId, treeNode) {//鼠标滑离后移除图标按钮 $("#addBtn_"+treeNode.tId).unbind().remove(); }; function beforeAddName(tId){//重写默认新增节点的方法，需要返回false var treeObj = $.fn.zTree.getZTreeObj("tree"); var node = treeObj.getNodeByTId(tId); var layerWidth=$(window).width()*0.8 > 550?550:$(window).width()*0.8; var layerHeigth=$(window).height()*0.8 > 270?270:$(window).height()*0.8; layer.open({ type: 2, content: '<%=request.getContextPath()%>/login/post/showOrgPostInfoPage.do?sRoleid='+node.sRoleid+"&type=0", area: [layerWidth+'px', layerHeigth+'px'], title:'新增岗位', btn:["提 交","取 消"], yes:function(index, layero){ var iframeWin = window[layero.find('iframe')[0]['name']]; if(iframeWin.validatebox()){ iframeWin.saveOrgPostInfo(window); demoIframe.attr('src',''); } }, closeBtn: 2 }); return false; } function beforeEditName(treeId, treeNode) {//重写默认编辑节点的方法，需要返回false var layerWidth=$(window).width()*0.8 > 550?550:$(window).width()*0.8; var layerHeigth=$(window).height()*0.8 > 270?270:$(window).height()*0.8; layer.open({ type: 2, content: '<%=request.getContextPath()%>/login/post/showOrgPostInfoPage.do?sRoleid='+treeNode.sRoleid+'&type=1', area: [layerWidth+'px', layerHeigth+'px'], title:'修改岗位', btn:["提 交","取 消"], yes:function(index, layero){ var iframeWin = window[layero.find('iframe')[0]['name']]; iframeWin.saveOrgPostInfo(window); }, closeBtn: 2 }); return false; } function beforeRemove(treeId, treeNode) {//重写默认删除节点的方法，需要返回false var _param="&sRoleid="+treeNode.sRoleid; layer.confirm('确定要删除该<span style="color: red;font-size: 20px;">'+treeNode.sRolename+'</span>岗位吗?', {icon: 3, title:'提示'}, function(index){ $.post('<%=request.getContextPath()%>/login/post/deleteOrgPost.do', _param, function(data){ if(data == 1){ layer.msg("删除成功", {icon: 6}); //在本地删除节点 var treeObj = $.fn.zTree.getZTreeObj(treeId); treeObj.removeNode(treeNode); demoIframe.attr('src',''); }else{ layer.msg("删除失败", {icon: 5}); } }); }); return false; } function showRemoveBtn(treeId, treeNode) { return !(treeNode.sRoleid == "root");//root节点不显示删除图标 } function showRenameBtn(treeId, treeNode) { return !(treeNode.sRoleid == "root");//子节点不显示修改图标 } function refreshTree(){//刷新节点 var treeObj = $.fn.zTree.getZTreeObj("tree"); treeObj.reAsyncChildNodes(selectNode, "refresh"); } function zteeHeight(){//iframe页取高度用 return $(window).height()-120; }</script><div> <table> <tr> <td width=260px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed"> <div class="zTreeDemoBackground" id="treeDiv"> <ul id="tree" class="ztree context-menu-one" style="width:200px; overflow:auto;"></ul> </div> </td> <td align='left' valign='top' width="100%"> <div id="iframeDiv"> <iframe ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width="100%" height="100%" SRC=""></iframe> </div> </td> </tr> </table></div></body></html> 0 0
- zTree结合jquery.contextMenu.js实现右键菜单
- jQuery右键菜单contextMenu实例
- JQuery之ContextMenu(右键菜单)
- JQuery之ContextMenu(右键菜单)
- JQuery之ContextMenu(右键菜单)
- JQuery之ContextMenu(右键菜单)
- jQuery右键菜单插件 jQuery ContextMenu
- jQuery右键菜单contextMenu插件使用实例
- Jquery的右键菜单插件ContextMenu
- Jquery的右键菜单插件ContextMenu
- JSP----jQuery插件ContextMenu生成右键菜单
- 【jQuery】右键菜单插件——contextmenu
- 【JQuery】右键菜单插件——contextmenu
- JSP----jQuery插件ContextMenu生成右键菜单
- JSP----jQuery插件ContextMenu生成右键菜单
- JQuery右键菜单插件ContextMenu使用指南
- JS组件Bootstrap ContextMenu右键菜单使用方法
- 右键菜单ContextMenu
- p354拓扑排序
- Retrofit网络开源库
- hdu 1010 Tempter of the Bone（dfs）
- AndroidStudio下gradle的入门介绍与使用
- Composer中国全量镜像
- zTree结合jquery.contextMenu.js实现右键菜单
- Collection、Set、List的区别
- 用C++实现快速排序
- C# 字节转换成"B", "KB", "MB", "GB", "TB", "PB"实例
- zTree框架实用Demo
- 将Flask部署到apache2
- redis window下安装
- leetcode 227. Basic Calculator II
- GitHub控件之BadgeView（数字提醒）
