一个IEWebControl TreeView右键菜单的例子,实现了添加、修改和删除功能,复制即可运行 更多TreeView的客户端操作参见 http://www.csdn.net/Develop/read_article.asp?id=22100
<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <HTML> <HEAD> <title>TreeView控件右键菜单</title> <style> <!-- .skin { cursor:default; font:menutext; position:absolute; text-align:left; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width:120px; background-color:menu; border:1 solid buttonface; visibility:hidden; border:2 outset buttonhighlight; } .menuitems { padding-left:15px; padding-right:10px; } --> </style> </HEAD> <body onclick="hideMenu()"> <form id="TreeView" method="post" runat="server"> <iewc:TreeView id="TreeView1" runat="server" ExpandLevel="3" HoverStyle="color:blue;background:#ffff00;"> <iewc:TreeNode Text="Node0" Expanded="True"> <iewc:TreeNode Text="Node3"> <iewc:TreeNode Text="Node5"></iewc:TreeNode> <iewc:TreeNode Text="Node6"></iewc:TreeNode> </iewc:TreeNode> <iewc:TreeNode Text="Node4"></iewc:TreeNode> </iewc:TreeNode> <iewc:TreeNode Text="Node1" Expanded="True"> <iewc:TreeNode Text="Node7"> <iewc:TreeNode Text="Node8"></iewc:TreeNode> </iewc:TreeNode> </iewc:TreeNode> <iewc:TreeNode Text="Node2" Expanded="True"> <iewc:TreeNode Text="Node9"></iewc:TreeNode> <iewc:TreeNode Text="Node10"> <iewc:TreeNode Text="Node11"></iewc:TreeNode> <iewc:TreeNode Text="Node12"></iewc:TreeNode> </iewc:TreeNode> </iewc:TreeNode> </iewc:TreeView> <div id="popupMenu" class="skin" onMouseover="highlighItem()" onMouseout="lowlightItem()" onClick="clickItem()"> <div class="menuitems" func="add">添加</div> <hr> <div class="menuitems" func="delete">删除</div> <div class="menuitems" func="modify">修改</div> </div> </form> <script language="javascript"> var menuskin = "skin"; var node = null;
function hideMenu() { popupMenu.style.visibility = "hidden"; }
function highlighItem() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = "highlight"; event.srcElement.style.color = "white"; } }
function lowlightItem() { if (event.srcElement.className == "menuitems") { event.srcElement.style.backgroundColor = ""; event.srcElement.style.color = "black"; window.status = ""; } }
function clickItem() { if (event.srcElement.className == "menuitems") { if(event.srcElement.getAttribute("func") == "add" && node != null) { var newNode=TreeView1.createTreeNode(); newNode.setAttribute("Text","new Node"); node.add(newNode); } else if (event.srcElement.getAttribute("func") == "delete" && node != null) { node.remove(); } else if (event.srcElement.getAttribute("func") == "modify" && node != null) { node.setAttribute("Text","hgknight"); } } } function TreeView1.oncontextmenu() { var nodeindex = event.treeNodeIndex; if (typeof(nodeindex) == "undefined") { node = null; return; } node = TreeView1.getTreeNode(nodeindex); var rightedge = document.body.clientWidth-event.clientX; var bottomedge = document.body.clientHeight-event.clientY; if (rightedge <popupMenu.offsetWidth) { popupMenu.style.left = document.body.scrollLeft + event.clientX - popupMenu.offsetWidth; } else { popupMenu.style.left = document.body.scrollLeft + event.clientX; } if (bottomedge <popupMenu.offsetHeight) { popupMenu.style.top = document.body.scrollTop + event.clientY - popupMenu.offsetHeight; } else { popupMenu.style.top = document.body.scrollTop + event.clientY; } popupMenu.style.visibility = "visible"; return false; } </script> </body> </HTML>

|