Being simple

treeview 的使用心得

技巧一:
可以设置在treeview的node上的点击事件,包括单击, 展开, 收缩, 双击, 右键单击等.采用的方法是通过服务器端注册客户端事件,代码如下:
tvMenu.Attributes.Add("onselectedindexchange", "TVChangeIndex();");
这是服务器端注册部分, 添加到page_load事件中.
以下为客户端代码:
<script language="javascript">
    // 点击时激发的事件
    function TVIndexChanged()
    {
      ChangeText( 'node changed' );
    }
    
    // 执行函数 
   //
    function ChangeText( eventName )
    {
      var treeNode = GetSelectedNode();
         
      if ( null == treeNode || undefined == treeNode )
      {
        return;
      }    
         
      var nodeData = treeNode.getAttribute( 'nodeData' ).split( ';' );         
             
      var id = GetKeyValue( 'SomeId' );
      var name = GetKeyValue( 'Name' );
alert(name);                
          }      
     
    // 取得树形控件,
    //
    function GetTreeHandle()
    {
      var tree;
      var treeName = 'tvControl';
        
      // Get a handle to the TreeView.
      tree = document.getElementById( treeName );
     
      if ( null == tree || undefined == tree )
        return null;
       
      return tree;
    }     
    
    // 取得选中的节点. 
    function GetSelectedNode()
    {
      var tree = GetTreeHandle();
      var treeNode;
     
      if ( null == tree || undefined == tree )
        return null;
     
      treeNode = tree.getTreeNode( tree.selectedNodeIndex ); 
     
      if ( null == treeNode || undefined == treeNode )
        return null;
     
      return treeNode;
    }  
  </script>
详细示例请见: http://www.codeproject.com/useritems/ClientSideTreeView.asp

技巧二:
给节点上添加tooltip,下面的代码是树形控件的页面代码,

<myfirsttree:treeview runat="server" SHOWTOOLTIP="false">
  <myfirsttree:treenode text="My first Tree Root">
   <myfirsttree:treenode text="<b OnMouseOver=popup('This_is_a_normal_message@br@bThis_is_a_bold_message@@b@br@iThis_is_an_italic_message@@i') OnMouseOut=kill()>My first Tree Node</b>"></myfirsttree:treenode>
   <myfirsttree:treenode text="<i OnMouseOver=popup('This_is_the_popup_message_of_the_second_TreeNode') OnMouseOut=kill()>My second Tree Node</i>"></myfirsttree:treenode>
   <myfirsttree:treenode text="<u OnMouseOver=popup('This_is_the_popup_message_of_the_third_node@br@uAnd_this_is_an_underline_message@@u') OnMouseOut=kill()>My third Tree Node</u>"></myfirsttree:treenode>
  </myfirsttree:treenode>
 </myfirsttree:treeview>
示例文件在此下载: http://files.cnblogs.com/margiex/tv_tooltip.rar
需要安装有IE webcontrols,步骤:先建立一个web应用目录,解压文件到此目录中,然后再建立一个bin目录,拷贝microsoft.web.ui.controls.dll到bin目录下即可.

posted on 2005-07-26 16:37 margiex 阅读(3737) 评论(3)  编辑 收藏 所属分类: web 、.net