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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章