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。