.NET2.0TreeView使用脚本模拟选中结点

前些天csdn有人问是否可以实现点击TreeNode的一行而不仅仅是点击TreeView的文字就可以选中该结点，我觉得用脚本是可以模拟做到的，特将结果写下来。既然是模拟，那么关键就是要骗过服务器端，让它真正为客户端所控制，我觉得这里的关键就是拼接出服务器端可认识的参数字符串。不难发现每个结点选中回传，参数是类似这样的－"sNew Node1//New Node2//New Node3//New Node4",所以一切也就明朗了。效果是点击结点左边空白区域同样选中了该结点。

< asp:TreeView  ID ="TreeView1"  runat ="server"  ShowLines ="True"  onclick ="javascript:showline()"
                OnSelectedNodeChanged ="TreeView1_SelectedNodeChanged" >
                 < Nodes >
                     < asp:TreeNode  Text ="New Node1"  Value ="New Node1" >
                         < asp:TreeNode  Text ="New Node2"  Value ="New Node2" >
                             < asp:TreeNode  Text ="New Node3"  Value ="New Node3" >
                                 < asp:TreeNode  Text ="New Node4"  Value ="New Node4" >
                                     < asp:TreeNode  Text ="New Node5"  Value ="New Node5" >
                                         < asp:TreeNode  Text ="New Node6"  Value ="New Node6" ></ asp:TreeNode >
                                     </ asp:TreeNode >
                                 </ asp:TreeNode >
                             </ asp:TreeNode >
                         </ asp:TreeNode >
                     </ asp:TreeNode >
                 </ Nodes >
</ asp:TreeView >

 

< script type = " text/javascript " >  
function  showline() 
{ 
     // 从点击行获取最外层table对象 
     var  the_tab  =  get_Element(event.srcElement, " table " ); 
     var  cells  =  the_tab.rows[ 0 ].cells.length - 1 ; 
     // 获取最后一列内部html 
     var  html  =  the_tab.rows[ 0 ].cells[cells].innerHTML; 
     var  subhtml  =  html.substring(html.indexOf( ' id= ' ),html.length - html.indexOf( ' id= ' )); 
     // 获取nodeid 
     var  nodeid  =  subhtml.substring( 3 ,subhtml.indexOf( '   ' ));  
     var  theobj  =  document.getElementById(nodeid); 
  
     var  num  =  nodeid.replace(  " TreeView1t " , "   " ); 
     // 数组存放从根结点到现节点的路径 
     var  result =   new    Array();  
    result.push(theobj.innerText);  
     
     // 将父节点text存到result 
     for ( var  j = num - 1 ;j   >= 0 ;j -- )  
    {  
         var  up  =  document.getElementById( " TreeView1t " + j);  
         if (getlayer(up)   < getlayer(theobj) && getlayer(up)  >= 2 )  
        {  
            result.push(up.innerText);  
        }  
    }          
     
     // 拼接回传参数字符串 
     var  layers  =   " s " ;  
     for ( var  k = result.length - 1 ;k   >= 0 ;k -- )  
    {  
       layers += result[k] +   ' / ' ; // 关键是这里不需要再加转义字符 ' ' 
    }  

    layers  =  layers.substring( 0 ,layers.length - 1 ); 
     // 将treeview手动postback 
    __doPostBack(  ' TreeView1 ' ,layers); 
} 


// 获取上层节点对象 
function  get_Element(the_ele,the_tag){ 
the_tag  =  the_tag.toLowerCase(); 
if (the_ele.tagName.toLowerCase() == the_tag) return  the_ele; 
while (the_ele = the_ele.offsetParent){ 
if (the_ele.tagName.toLowerCase() == the_tag) return  the_ele; 
} 
return ( null ); 
} 

// 获取当前点击行的层数 
function  getlayer(obj)  
{  
    return  obj.parentElement.parentElement.parentElement.rows[ 0 ].cells.length; 
}  
</ script >

 

protected   void  TreeView1_SelectedNodeChanged( object  sender, EventArgs e)
{
      Response.Write( this .TreeView1.SelectedNode.Text);
}