none
Comment développer ou réduire tous les TreeNodes avec JavaScript RRS feed

  • Discussion générale

  • On peut développer et réduire tous les TreeNodes du côté serveur, mais il a besoin d'un post back. Pour éviter cela, nous pouvons utiliser JavaScript.

     

    Dans l'exemple de code ci-dessous, la fonction "TreeviewExpandCollapseAll" est utilisée pour montrer comment développer ou réduire un TreeView. La fonction prend deux paramètres, le premier paramètre "treeViewId" est l'ID du contrôle TreeView, et le second paramètre "expandAll" est utilisé pour déterminer si on développe ou pas le contrôle TreeView.  

     

    Voir l'intégralité du code ci-dessous :

     

    <%@ Page Language="C#" %>
    <!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 id="Head1" runat="server">
        <title>TreeView Demo</title>
        <script language="javascript" type="text/javascript">
            function TreeviewExpandCollapseAll(treeViewId, expandAll) {
                var displayState = (expandAll == true ? "none" : "block");
                var treeView = document.getElementById(treeViewId);
                if (treeView) {
                    var treeLinks = treeView.getElementsByTagName("a");
                    var nodeCount = treeLinks.length;
                    for (i = 0; i < nodeCount; i++) {
                        if (treeLinks[i].firstChild.tagName) {
                            if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
                                var currentToggleLink = treeLinks[i];
                                var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                                if (childContainer.style.display == displayState) {
                                    eval(currentToggleLink.href);
                                }
                            }
                        }
                    }
                }
            }
     
            function GetParentByTagName(parentTagName, childElementObj) {
                var parent = childElementObj.parentNode;
                while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                    parent = parent.parentNode;
                }
                return parent;
            } </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TreeView ID="TreeViewDemo" runat="server" ExpandDepth="1">
                <Nodes>
                    <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A" Value="A">
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A1" Value="A1">
                            <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A11" Value="A11"></asp:TreeNode>
                            <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A12" Value="A12"></asp:TreeNode>
                        </asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A2" Value="A2">
                            <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A21" Value="A21"></asp:TreeNode>
                            <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A22" Value="A22"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
     
                </Nodes>
            </asp:TreeView>
            <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', true)">Expand
                All</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', false)">
                    Collapse All</a>
        </div>
        </form>
    </body>
    </html>

     

    Pour plusieurs informations, visitez la page Foire aux Questions – ASP.NET

     


    Appel à contribution ! http://social.msdn.microsoft.com/Forums/fr-FR/vbasicfr/thread/ff4910bf-dca4-4664-b01e-b58bd860a643
    mardi 13 avril 2010 13:40
    Modérateur