TreeView With Node Hover

  

TreeView With Mouse Hover

 

文/黃忠成

 

 

此範例一樣是由未出版的[ASP.NET 3.5聖經] 中抽取出來的

目的是使用TreeView時，能於滑鼠移至某個Item時,顯示一段文字，

簡略的說，就是Hover的意思。

那這有何困難呢？困難之處在於TreeView本身並未提供這類功能，也

就是說TreeView從設計架構上就不支援這種做法。其實要達到這個效果

也不難，我們都知道,TreeView最終產生的是一群TR,TD的HTML碼，如果

能得到每個Node的TR、TD之HTML ID，那麼我們便可以透過JavaScript來Attath hover事件至該HTML Element上，最終結果便是滑鼠移到該Node上時，執行一

段JavaScript程式碼，也就是Hover！

那麼，問題就是怎麼取得這個HTML ID了，以下的程式碼可以辦到，以Reflection呼叫TreeView私有函式。

protected void Page_PreRenderComplete(object sender, EventArgs e) {         PropertyInfo pi = typeof(TreeNode).GetProperty("Index", BindingFlags .Instance | BindingFlags.NonPublic);         foreach (TreeNode node in TreeView1.Nodes)         {             object index = pi.GetValue(node, null);             ClientScript.RegisterStartupScript(GetType(), TreeView1.ClientID+"_"+index.ToString()+"_hook",                   string.Format("hookEvent(document.getElementById('{0}'));", TreeView1.ClientID + "t" + index.ToString()),true);         } }

透過TreeNode私有的Index屬性，可以取得TreeNode的編號，搭配上TreeView的ClientID，便是TreeNode的ClientID，有了這個ID就能Attach 事件了。下面是完整的程式碼：

.aspx

<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>   <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"> < head runat="server">     <title>Untitled Page</title>     <script language=javascript>         function hoverNode()     {        document.getElementById("Label1").innerHTML = event.srcElement.innerHTML;     }         function hookEvent(ctrl)     {        ctrl.attachEvent("onmouseover",hoverNode);     }         </script> </ head > < body >     <form id="form1" runat="server">          <div>         <table>         <tr>         <td valign=top align=left>             <asp:TreeView ID="TreeView1" runat="server">                 <Nodes>                     <asp:TreeNode Text="Node1" Value="Node1"></asp:TreeNode>                     <asp:TreeNode Text="Node2" Value="Node2"></asp:TreeNode>                     <asp:TreeNode Text="Node3" Value="Node3"></asp:TreeNode>                 </Nodes>             </asp:TreeView>         </td>         <td valign=top align=left>             <asp:Label ID="Label1" runat=server />         </td>         </tr>         </table>         </div>     </form> </ body > </ html >

.aspx.cs

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Reflection;   public partial class _Default : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {     }     protected void Page_PreRenderComplete(object sender, EventArgs e)     {         PropertyInfo pi = typeof(TreeNode).GetProperty("Index", BindingFlags .Instance | BindingFlags.NonPublic);         foreach (TreeNode node in TreeView1.Nodes)         {             object index = pi.GetValue(node, null);            ClientScript.RegisterStartupScript(GetType(), TreeView1.ClientID+"_"+index.ToString()+"_hook",               string.Format("hookEvent(document.getElementById('{0}'));", TreeView1.ClientID + "t" + index.ToString()),true);         }     } }

請注意！我使用了IE獨有的attachEvent來掛載事件，如果想在FireFox上正常運作，請改用addEventLister。