Jquery Easy-UI 树形菜单的运用
一、树形菜单的显示
首先在引入easyui包的基础上,这个要加进去<div id=”menuTree” class=”easyui-menu” style=”width: 120px;”></div>,div中间不用写入东西,主要就是在后面的function中进行初始化树。
一、树形菜单的右键标签
期中增加同级机构、增加下属机构、修改、删除分别是调用了addNode(),del()等方法。
<div id="menuTree" class="easyui-menu" style="width: 120px;"> <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun_AddSiblingOrg"> <div id="miAddSibling" onclick="addNode(1)" data-options="iconCls:\'icon-add\'"> 新增同级机构</div> </SecurityTag:Authorize> <SecurityTag:Authorize ID="Authorize1" runat="server" FunctionID="fun_AddChildrenOrg"> <div id="miAddChildren" onclick="addNode(0)" data-options="iconCls:\'icon-add\'"> 新增下属机构</div> </SecurityTag:Authorize> <SecurityTag:Authorize ID="Authorize2" runat="server" FunctionID="fun_ModeifyOrg"> <div id="miEdit" onclick="edit()" data-options="iconCls:\'icon-edit\'"> 修改</div> </SecurityTag:Authorize> <SecurityTag:Authorize ID="Authorize3" runat="server" FunctionID="fun_DelOrg"> <div class="menu-sep"> </div> <div id="miDel" onclick="del()" data-options="iconCls:\'icon-no\'"> 删除</div> </SecurityTag:Authorize> </div>
View Code
至于为什么右键点击才显示,那就是easyui的内容了,不过有一点注意,加入权限管理标签方便后面对这些按钮权限的控制,这里也可以当作不用加入这些标签,<div class=”menu-sep”></div>是增加分割线,
下面就是要在js中处理了。
<script type="text/javascript"> $(function () { var height = document.body.scrollHeight - document.body.scrollTop - 25 - 26; //alert(height); var objLayout = $("#layoutRegion"); objLayout.height(height); objLayout.layout(\'resize\'); initTree(); }) var currentTreeNode = null; var parentTreeNode = null; var objTree = $(\'#ulTree\'); var objLayout = $("#layoutRegion"); function openCenterPage(url, params) { $("#ifrContent").attr("src", url + \'?1=1\' + params); } function addNode(isAddSibling) { var params = ""; if (isAddSibling == "1") { params += "&pid=" + parentTreeNode.id; } else { params += "&pid=" + currentTreeNode.id; } params += "&isAddSibling=" + isAddSibling; openCenterPage(\'OrgEdit.aspx\', params); } function viewNode(id) { var params = ""; params += "&id=" + id; openCenterPage(\'OrgList.aspx\', params); } function del() { if (currentTreeNode.children.length > 0) { $.messager.alert("系统提示", "请先删除下属机构!", "info"); return; } if (!window.confirm("确定删除该机构吗?")) { return; } util.ajaxForWebMethod(\'orgmgr.aspx/Delete\', { id: currentTreeNode.id }, function (data) { //请求成功的处理 var result = data.d; if (result.Code == "0") { viewNode(parentTreeNode.id); updateTree(); $.messager.alert("系统提示", "删除成功!", "info"); } else { $.messager.alert("系统提示", result.Message, "info"); } }, function (data) { //请求失败的处理 $.messager.alert("系统提示", "删除失败,请与管理员联系。", "info"); }); } function edit() { var params = ""; params += "&id=" + currentTreeNode.id; openCenterPage(\'OrgEdit.aspx\', params); } //树菜单状态 function menuStatus() { if (!currentTreeNode) { return; } var menuTree = $(\'#menuTree\'); //var data = objTree.tree(\'getData\', currentTreeNode.target); parentTreeNode = objTree.tree(\'getParent\', currentTreeNode.target); if (parentTreeNode == null) { parentTreeNode = currentTreeNode; //为根节点时,父点与当前点为相同 menuTree.menu(\'disableItem\', $(\'#miAddSibling\')); //根节点时,不能增加同级 menuTree.menu(\'disableItem\', $(\'#miEdit\')); //根节点时,不能修改 } else { menuTree.menu(\'enableItem\', $(\'#miAddSibling\')); menuTree.menu(\'enableItem\', $(\'#miEdit\')); } } function initTree() { treeHelper.bind(objTree, \'Orgmgr.aspx/Query\', { requestUser: false }); // 右键点击节点然后显示上下文菜单 objTree.tree({ onClick: function (node) { //alert(node.text); // alert node text property when clicked viewNode(node.id); }, onContextMenu: function (e, node) { e.preventDefault(); // 选择节点 objTree.tree(\'select\', node.target); // 显示上下文菜单 $(\'#menuTree\').menu(\'show\', { left: e.pageX, top: e.pageY }); if (node == currentTreeNode) { return; } //当前结点 currentTreeNode = node; viewNode(node.id); menuStatus(); } }); } function updateTree() { //alert(\'update\'); //objTree.tree(\'reload\', objTree.tree(\'getRoot\')); treeHelper.bind(objTree, \'orgmgr.aspx/Query\', { requestUser: false }); } </script>
View Code