首頁 > 開發者 > ASP

ASP.NET之TreeView複選框實現全選或全不選

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
ASP.NET之TreeView複選框實現全選或全不選
(1)TreeView 控制項不會公開 AutoPostBack 屬性。因此，若要提交複選框選擇，必須在頁上放置一個控制項（如 Button Web 伺服器控制項），以便將資訊回傳至伺服器。
(2)還有一種辦法就是在用戶端寫JavaScript指令碼
  但是有個問題：TreeView是動態產生的，那麼什麼時候調用全選的指令碼呢？  答案肯定是在根節點的checkbox上的onclick事件上調用全選的JavaScript指令碼函數。那麼自動產生的頁中的HTML代碼裡沒有onclick這個事件，怎麼辦？問題轉移了，沒有怎麼辦？自己給加一個，怎麼加，什麼時候加？什麼時候加，當然是頁面一載入的時候（Page_Load事件中），那麼就一個問題了，那就是怎麼加？
代碼如下（給根節點加一個onclick事件）：
      string str ="<script type='text/javascript' language='javascript'>
document.getElementByIdx_x('TreeView1n0CheckBox').setAttribute('onclick','rec
()');</script>";
   ClientScriptManager cs = Page.ClientScript;
    cs.RegisterStartupScript(this.GetType(),"addOnclick",str);
接下來運行，就會發現根本沒有錯，但實現不了效果，原因很簡單，那裡就是根本沒有寫"rec()"方法的實現。
方法代碼如下：
 <script type="text/javascript" language="javascript">
        function rec() {

            var obj = document.getElementByIdx_x('TreeView1n0CheckBox');  //得到根節點元素
            for (var i = 0; i < document.getElementsByTagName_r("input").length; i++) {
                if (document.getElementsByTagName_r("input").item(i).type == "checkbox") {
        document.getElementsByTagName_r("input").item(i).checked=obj.checked;
                } }

        
      
        }
 </script>
這樣就基本完成了這樣一個效果，代碼需要進一步最佳化，以實現更強大的效果。雖然這樣寫也不
是太難理解，但我足足想了兩天。
（3）最後可以用JQuery實現，更簡單，功能更強大（任何一級節點都可以實現全選或全不選）！
所以推薦用這種方法。
代碼如下：
<%@ Page Language="C#" CodeBehind="TreeView.aspx.cs" Inherits="TreeView.TreeView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //為了不至於和頁面上其他元素混亂，所以把TreeView控制項放在一個id為Treeview的div中，然後
            //再尋找checkbox
            $("#Treeview table tr td  input[type=checkbox]").click(
             function () {

                 $("#Treeview div[id=" + $(this).attr("id").toString().replace(/CheckBox/, "Nodes") + "] table tr td  input[type=checkbox]")
                    .attr("checked", $(this).attr("checked"));
                         }
            );
             });
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id ="Treeview">
        <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All">
            <Nodes>
                <asp:TreeNode Text="學院" Value="學院">
                    <asp:TreeNode Text="工商學院" Value="工商學院"></asp:TreeNode>
                    <asp:TreeNode Text="電腦學院" Value="電腦學院"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="市" Value="市">
                    <asp:TreeNode Text="濟南市" Value="濟南市">
                

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More