|
今天在论坛看到一个问题，问的是如何实现 TreeView 控件在不回发的情况下，实现各种功能。既然不要求回发，只能使用客户端的脚本来实现了，下面就是完整的代码。
<%@ Page Language="C#" AutoEventWireup="true" %>
<!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="IT知道网之.NET专区">
<asp:TreeNode Text="">
<asp:TreeNode Text="IT知道网之Silverlight">
<asp:TreeNode Text="java技术">
<asp:TreeNode Text="php技术"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="c/c++技术">
<asp:TreeNode Text="IT知道网之数据库">
<asp:TreeNode Text="软件工程"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="软件工程">
<asp:TreeNode Text="网站推广"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="图形图像"></asp:TreeNode>
<asp:TreeNode Text="网页特效">
<asp:TreeNode Text="it健康">
<asp:TreeNode Text="it故事">
<asp:TreeNode Text="IT知道网之硬件资讯"></asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</div>
</form>
</body>
</html>
| 
