摘要: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。