none
Comment faire pour cocher/décocher le CheckBox d’un TreeNode RRS feed

  • Discussion générale

  • Lorsqu’on definit ShowCheckBoxes = "All", on a besoin d’offrir une fonctionnalité qui fait que si les utilisateurs sélectionnent le CheckBox du nœud racine, puis tous les contrôles CheckBox des  nœuds enfants sont cochés automatiquement.

     

    Lorsque le nœud parent est coché, tous les nœuds enfants devraient être cochés automatiquement ; lorsqu'un nœud enfant n'est pas cochée, le nœud parent doit être désactivé.

     

    Dans les fonctions ci-dessous:

    ·         OnTreeClick : utilisé pour vérifier les nœuds parent et enfant

    ·         CheckUncheckChildren : utilisé pour cocher ou décocher les nœuds enfant

    ·         CheckUncheckParents : utilisé pour cocher ou décocher les nœuds parent

    ·         AreAllSiblingsChecked : utilisé pour vérifier tous les nœuds de même niveau

    ·         GetParentByTagName : permet d'obtenir le nom de la balise parente

     

    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">
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                TreeViewDemo.Attributes.Add("onclick", "OnTreeClick(event)");
            }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>TreeView</title>
     
     
        <script language="javascript" type="text/javascript">
       function OnTreeClick(evt)
       {
            var src = window.event != window.undefined ? window.event.srcElement : evt.target;
            var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
            if(isChkBoxClick)
            {
                var parentTable = GetParentByTagName("table", src);
                var nxtSibling = parentTable.nextSibling;
                if(nxtSibling && nxtSibling.nodeType == 1)// verifier si le noeud de meme niveau suivant n’est pas null et il est un noeud element
                {
                    if(nxtSibling.tagName.toLowerCase() == "div") //si le noeud a des enfants
                    {
                        //cocher ou décocher les nœuds enfant a tous les niveaux
                        CheckUncheckChildren(parentTable.nextSibling, src.checked);
                    }
                }
     
                //cocher ou decocher les parents pour a tous les niveaux
                CheckUncheckParents(src, src.checked);
            }
       }  
     
       function CheckUncheckChildren(childContainer, check)
       {
          var childChkBoxes = childContainer.getElementsByTagName("input");
          var childChkBoxCount = childChkBoxes.length;
          for(var i = 0; i<childChkBoxCount; i++)
          {
            childChkBoxes[i].checked = check;
          }
       } 
     
       function CheckUncheckParents(srcChild, check)
       {
           var parentDiv = GetParentByTagName("div", srcChild);
           var parentNodeTable = parentDiv.previousSibling; 
     
           if(parentNodeTable)
            {
                var checkUncheckSwitch;       
                if(check) //checkbox coché
                {
                    var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                    if(isAllSiblingsChecked)
                        checkUncheckSwitch = true;
                    else    
                        return; //on n’a pas besoin de verifier le parent si aucun noeud enfant n’est pas coché
                }
                else //checkbox décoché
                {
                    checkUncheckSwitch = false;
                }           
                var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
                if(inpElemsInParentTable.length > 0)
                {
                    var parentNodeChkBox = inpElemsInParentTable[0]; 
                    parentNodeChkBox.checked = checkUncheckSwitch; 
                    //faire la meme chose de facon recursive
                    CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
                }
            }
       }
       function AreAllSiblingsChecked(chkBox)
       {
         var parentDiv = GetParentByTagName("div", chkBox);
         var childCount = parentDiv.childNodes.length;
         for(var i=0; i<childCount; i++)
         {
            if(parentDiv.childNodes[i].nodeType == 1) // verifier si le noeud enfant est un node element
            {
                if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
                {
                   var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                  // si aucun noeud de meme niveau n’est pas coche, retourner false
                  if(!prevChkBox.checked) 
                  {
                    return false;
                  } 
                }
            }
         }
         return true;
       } 
     
       // Fonction utilitaire pour récupérer le conteneur d’un élément à partir du nom de balise
       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" ShowCheckBoxes="All">
                <Nodes>
                    <asp:TreeNode Text="My Computer">
                        <asp:TreeNode Text="Favorites">
                            <asp:TreeNode Text="News">
                                <asp:TreeNode Text="MSN" NavigateUrl="http://www.msn.com" />
                                <asp:TreeNode Text="MSNBC News" NavigateUrl="http://www.msnbc.msn.com" />
                            </asp:TreeNode>
                            <asp:TreeNode Text="Technology">
                                <asp:TreeNode Text="Microsoft" NavigateUrl="http://www.microsoft.com" />
                                <asp:TreeNode Text="ASP.NET" NavigateUrl="http://www.asp.net" />
                                <asp:TreeNode Text="GotDotNet" NavigateUrl="http://www.gotdotnet.com" />
                                <asp:TreeNode Text="MSDN" NavigateUrl="http://msdn.microsoft.com" />
                            </asp:TreeNode>
                            <asp:TreeNode Text="Shopping">
                                <asp:TreeNode Text="MSN Shopping" NavigateUrl="http://shopping.msn.com" />
                                <asp:TreeNode Text="MSN Autos" NavigateUrl="http://autos.msn.com" />
                            </asp:TreeNode>
                        </asp:TreeNode>
                        <asp:TreeNode Text="City Links">
                            <asp:TreeNode Text="MapPoint" NavigateUrl="http://www.mappoint.com" />
                            <asp:TreeNode Text="MSN City Guides" NavigateUrl="http://local.msn.com" />
                        </asp:TreeNode>
                        <asp:TreeNode Text="Music Links">
                            <asp:TreeNode Text="MSN Music" NavigateUrl="http://music.msn.com" />
                        </asp:TreeNode>
                    </asp:TreeNode>
                </Nodes>
            </asp:TreeView>
        </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 14:00
    Modérateur