IEWebControl TreeView右键菜单实例

一个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 οnclick="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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值