treeview简单的右键菜单

本文介绍了一个使用 ASP.NET 和 JavaScript 实现的上下文菜单功能,该功能为 TreeView 控件提供了右键菜单选项,包括选择节点、展开和折叠节点等功能。通过自定义样式和脚本,可以轻松地将此上下文菜单集成到现有的 ASP.NET 应用程序中。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

%@ Page Language="C#" %>

<html>
<
head>
    <style>
    <!--
        .skin1 {
            
cursor:default;
            
font:menutext;
            
position:absolute;
            
text-align:left;
            
font-familyArial, Helvetica, sans-serif;
            
font-size10pt;
            
width:120px;
            
background-color:menu;
            
border:1 solid buttonface;
            
visibility:hidden;
            
border:2 outset buttonhighlight;
        }
        
.menuitems {
            
padding-left:15px;
            
padding-right:10px;
    }
    
-->
    </style>

    <script type="text/javascript">

<!-- Begin
var menuskin = "skin1"
var display_url = 1; // Show URLs in status bar?
function showmenuie5() {
    
if (event.srcElement.type != undefined)
    {
            
var s  = event.srcElement.id;
            
var ind = s.replace("TreeView1t""");
            s = s.replace(
"TreeView1t""TreeView1n"); 

            document.getElementById(
'one').url = event.srcElement.href;
            document.getElementById(
'one').innerText = "Select";
            
var ch = document.getElementById(s);
            
if (ch != null){
                document.getElementById(
'two').url = "javascript:TreeView_ToggleNode(TreeView1_Data," + ind + "," + s + ",' '," + s + "Nodes)";    
                document.getElementById(
'two').innerText = "Expand//Collapse";
            }
            
else        
                document.getElementById(
'two').outerHTML="<div id=two class=menuitems url=''></div>"


            var rightedge = document.body.clientWidth-event.clientX;
            
var bottomedge = document.body.clientHeight-event.clientY;
            
if (rightedge < ie5menu.offsetWidth)
                ie5menu.style.left = document.body.scrollLeft + 
event.clientX - ie5menu.offsetWidth;
            
else
                ie5menu.style.left = document.body.scrollLeft + event.clientX;
            
if (bottomedge < ie5menu.offsetHeight)
                ie5menu.style.top = document.body.scrollTop + 
event.clientY - ie5menu.offsetHeight;
            
else
                ie5menu.style.top = document.body.scrollTop + event.clientY;
                ie5menu.style.visibility = 
"visible";
                }
                
else
                {
                   ie5menu.style.visibility = 
"hidden";
                }
            
return false;
    }
    
function hidemenuie5() {
        ie5menu.style.visibility = 
"hidden";
    }
    
function highlightie5() {
        
if (event.srcElement.className == "menuitems") {
            
event.srcElement.style.backgroundColor = "highlight";
            
event.srcElement.style.color = "white";
        
if (display_url)
            window.status = 
event.srcElement.url;
        }
    }
    
function lowlightie5() {
        
if (event.srcElement.className == "menuitems") {
            
event.srcElement.style.backgroundColor = "";
            
event.srcElement.style.color = "black";
            window.status = 
"";
        }
    }
    
function jumptoie5() {
        
if (event.srcElement.className == "menuitems") {
            
if (event.srcElement.getAttribute("target") != null)
                window.open(
event.srcElement.url, event.srcElement.getAttribute("target"));
            
else
                window.location = event.srcElement.url;
        }
    }
//  End -->
    </script>

</
head>
<
body>
    <form id="form1" runat="server">
        <div id="ie5menu" class="skin0" onmouseover="highlightie5()" onmouseout="lowlightie5()"
            onclick="jumptoie5();">
            <div id="one" class="menuitems" url="">
            </div>
            <div id="two" class="menuitems" url="">
            </div>
        </div>
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="a" Value="a">
                    <asp:TreeNode Text="b" Value="b">
                        <asp:TreeNode Text="c" Value="c"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="cc" Value="cc">
                    <asp:TreeNode Text="ccc" Value="ccc">
                        <asp:TreeNode Text="cccc" Value="cccc"></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
            <SelectedNodeStyle BackColor="#C00000" />
        </asp:TreeView>
    </form>

    <script type="text/javascript">
      if
 (document.all) {
          ie5menu.className = menuskin;
          document.getElementById(
'TreeView1').oncontextmenu = showmenuie5;
          document.body.onclick = hidemenuie5;
      }
    
</script>
</
body>
</
html>
 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值