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。