TreeView 控件之不回发操作

来源:互联网 发布:网络课程的利弊 编辑:程序博客网 时间:2024/05/13 22:47

今天在论坛看到一个问题,问的是如何实现 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="【孟子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>