本文介绍了一种在ASP.NET中实现TreeView控件不回发的方法，通过客户端脚本实现节点点击事件，避免了服务器端不必要的往返操作。
今天在论坛看到一个问题，问的是如何实现 TreeView 控件在不回发的情况下，实现各种功能。既然不要求回发，只能使用客户端的脚本来实现了，下面就是完整的代码。
<!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>
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
