今天在論壇看到一個問題,問的是如何實現 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>