转：http://hi.baidu.com/wqeast/blog/item/c085db2a5907cc9b033bf6b9.html

A few ASP.NET 2.0 TreeView coders were asking for a how to have context menus - per node - on the TreeView control. Well I spent a small amount of time on this and wanted to post one solution. A few caveats:

a. IE Specific
b. I never optimized the javascript to use parameters

Hope this helps soeone achieve what they need. If you find a better solution please feel free to let me know!

 

 

<% @   Page   Language ="C#"  %>

< html >
< head >
     < style >
    <! --
         .skin1  {
             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 >

     < 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 >