IEWebControl TreeView右键菜单实例

一个IEWebControl TreeView右键菜单的例子,实现了添加、修改和删除功能,复制即可运行
更多TreeView的客户端操作参见
http://www.csdn.net/Develop/read_article.asp?id=22100

1@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
  1<html>
  2<head>
  3<title>TreeView控件右键菜单</title>
  4<style>   
  5<!--   
  6.skin   
  7{   
  8cursor:default;   
  9font:menutext;   
 10position:absolute;   
 11text-align:left;   
 12font-family: Arial, Helvetica, sans-serif;   
 13font-size: 10pt;   
 14width:120px;   
 15background-color:menu;   
 16border:1 solid buttonface;   
 17visibility:hidden;   
 18border:2 outset buttonhighlight;   
 19}   
 20.menuitems   
 21{   
 22padding-left:15px;   
 23padding-right:10px;   
 24}   
 25\-->   
 26</style>
 27</head>
 28<body onclick="hideMenu()">
 29<form id="TreeView" method="post" runat="server">
 30<iewc:treeview expandlevel="3" hoverstyle="color:blue;background:#ffff00;" id="TreeView1" runat="server">
 31<iewc:treenode expanded="True" text="Node0">
 32<iewc:treenode text="Node3">
 33<iewc:treenode text="Node5"></iewc:treenode>
 34<iewc:treenode text="Node6"></iewc:treenode>
 35</iewc:treenode>
 36<iewc:treenode text="Node4"></iewc:treenode>
 37</iewc:treenode>
 38<iewc:treenode expanded="True" text="Node1">
 39<iewc:treenode text="Node7">
 40<iewc:treenode text="Node8"></iewc:treenode>
 41</iewc:treenode>
 42</iewc:treenode>
 43<iewc:treenode expanded="True" text="Node2">
 44<iewc:treenode text="Node9"></iewc:treenode>
 45<iewc:treenode text="Node10">
 46<iewc:treenode text="Node11"></iewc:treenode>
 47<iewc:treenode text="Node12"></iewc:treenode>
 48</iewc:treenode>
 49</iewc:treenode>
 50</iewc:treeview>
 51<div class="skin" id="popupMenu" onclick="clickItem()" onmouseout="lowlightItem()" onmouseover="highlighItem()">
 52<div class="menuitems" func="add">添加</div>
 53<hr/>
 54<div class="menuitems" func="delete">删除</div>
 55<div class="menuitems" func="modify">修改</div>
 56</div>
 57</form>
 58<script language="javascript">   
 59var menuskin = "skin";   
 60var node = null; 
 61
 62function hideMenu()   
 63{   
 64popupMenu.style.visibility = "hidden";   
 65} 
 66
 67function highlighItem()   
 68{   
 69if (event.srcElement.className == "menuitems")   
 70{   
 71event.srcElement.style.backgroundColor = "highlight";   
 72event.srcElement.style.color = "white";   
 73}   
 74} 
 75
 76function lowlightItem()   
 77{   
 78if (event.srcElement.className == "menuitems")   
 79{   
 80event.srcElement.style.backgroundColor = "";   
 81event.srcElement.style.color = "black";   
 82window.status = "";   
 83}   
 84} 
 85
 86function clickItem()   
 87{   
 88if (event.srcElement.className == "menuitems")   
 89{   
 90if(event.srcElement.getAttribute("func") == "add" && node != null)   
 91{   
 92var newNode=TreeView1.createTreeNode();   
 93newNode.setAttribute("Text","new Node");   
 94node.add(newNode);   
 95}   
 96else if (event.srcElement.getAttribute("func") == "delete" && node != null)   
 97{   
 98node.remove();   
 99}   
100else if (event.srcElement.getAttribute("func") == "modify" && node != null)   
101{   
102node.setAttribute("Text","hgknight");   
103}   
104}   
105}   
106  
107function TreeView1.oncontextmenu()   
108{   
109var nodeindex = event.treeNodeIndex;   
110if (typeof(nodeindex) == "undefined")   
111{   
112node = null;   
113return;   
114}   
115  
116node = TreeView1.getTreeNode(nodeindex);   
117  
118var rightedge = document.body.clientWidth-event.clientX;   
119var bottomedge = document.body.clientHeight-event.clientY;   
120if (rightedge <popupMenu.offsetWidth)   
121{   
122popupMenu.style.left = document.body.scrollLeft + event.clientX - popupMenu.offsetWidth;   
123}   
124else   
125{   
126popupMenu.style.left = document.body.scrollLeft + event.clientX;   
127}   
128if (bottomedge <popupMenu.offsetHeight)   
129{   
130popupMenu.style.top = document.body.scrollTop + event.clientY - popupMenu.offsetHeight;   
131}   
132else   
133{   
134popupMenu.style.top = document.body.scrollTop + event.clientY;   
135}   
136popupMenu.style.visibility = "visible";   
137return false;   
138}   
139  
140</script>
141</body>
142</html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus