转：http://blog.csdn.net/net_lover/archive/2008/06/01/2500613.aspx
今天在论坛看到一个问题，问的是如何实现 TreeView 控件在不回发的情况下，实现各种功能。既然不要求回发，只能使用客户端的脚本来实现了，下面就是完整的代码。
- <pre class="csharp" name="code"><font face="Courier New"><%@ Page Language="C#" AutoEventWireup="true" %></font></pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e) { Response.Write("刷新标记：" + DateTime.Now.Ticks.ToString()); TreeView1.Attributes.Add("onclick", "getNode(event);"); } </script>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>TreeView 控件之不回发操作</title>
<script type="text/javascript"> var foo = null; function getNode(evt) { evt1 = window.event ? window.event.srcElement : evt.target; if(evt1.tagName && evt1.tagName != "INPUT") { if(evt1.tagName == "IMG") { return true; } else { if(foo) foo.style.color="#00F"; //最初的颜色 evt1.style.color="#f0f0f0"; //如果要其他单击变换颜色，调整这3的位置即可，应该不用再说了吧？？？ foo = evt1; var sb = evt1.previousSibling; if(sb.tagName == "INPUT") { var imgPlus = document.getElementById(sb.id.replace(/CheckBox/gi,"")); if(imgPlus) { eval(imgPlus.href) } } if(window.event) { window.event.returnValue=false; return false; } else { evt.preventDefault(); evt.stopPropagation(); } } } }
</script>
</head> <body> <form id="form1" runat="server"> <div> <asp:TreeView ID="TreeView1" runat="server" EnableClientScript="True" ShowCheckBoxes="All" ShowLines="True"> <Nodes> <asp:TreeNode Text="【孟子E章站点】之ASP.NET"> <asp:TreeNode Text="【孟子E章站点】之MVC"> <asp:TreeNode Text="【孟子E章站点】之Silverlight"> <asp:TreeNode Text="【孟子E章站点】之LINQ"> <asp:TreeNode Text="【孟子E章站点】之XML"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="【孟子E章站点】之XSL"> <asp:TreeNode Text="【孟子E章站点】之C#"> <asp:TreeNode Text="【孟子E章站点】之VB.NET"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="【孟子E章站点】之Blog"> <asp:TreeNode Text="【孟子E章站点】之UWA"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="【孟子E章站点】之JavaScript"></asp:TreeNode> <asp:TreeNode Text="【孟子E章站点】之 HTML DOM"> <asp:TreeNode Text="【孟子E章站点】之VSTS"> <asp:TreeNode Text="【孟子E章站点】之 Live"> <asp:TreeNode Text="【孟子E章站点】之Book On Line"></asp:TreeNode> </asp:TreeNode> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> </form> </body> </html>