Comment puis-je sélectionner nœud enfant par programme, en dynatree?

Question

J'utilise le dynaTree jQuery dans mon application et je veux sélectionner les tous les nœuds enfants par programme lorsqu'un noeud parent est sélectionné. La structure de mon arbre est la suivante

<div id = "tree">
    <ul>
       <li>package 1
         <ul>
           <li>module 1.1
              <ul>
                <li> document 1.1.1</li>
                <li> document 1.1.2</li>
               </ul>
            </li>  
            <li>module 1.2
               <ul>
                 <li>document 1.2.1</li>
                 <li>document 1.2.2</li>
               </ul>
           </li>
        </ul>
     </li>
     <li> package 2
        <ul>
          <li> module 2.1
            <ul>
               <li>document 2.1.1</li>
               <li>document 2.1.1</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div> 

Maintenant, ce que je veux est que lorsque je clique sur le nœud de l'arbre avec le titre "paquet 1" tous ses nœuds enfants ie (module 1.1, le document 1.1.1, 1.1.2 Document, module 1.2, le document 1.2.1, document 1.2 .2) devrait également être sélectionné.

Voici l'approche que j'ai essayé d'utiliser:

$("#tree").dynatree({
        onSelect: function(flag, dtnode) {
            // This will happen each time a check box is selected/deselected
            var selectedNodes = dtnode.tree.getSelectedNodes();
            var selectedKeys = $.map(selectedNodes, function(node) {

                //alert(node.data.key);
                return node.data.key;


            });
            // Set the hidden input field's value to the selected items
            $('#SelectedItems').val(selectedKeys.join(","));

            if (flag) {
                child = dtnode.childList;

                alert(child.length);
                for (i = 0; i < child.length; i++) {
                    var x = child[i].select(true);
                    alert(i);
                 }
            }
        },
        checkbox: true,
        onActivate: function(dtnode) {
            //alert("You activated " + dtnode.data.key);
        }


    });

Dans la condition de if(flag) je reçois tous les nœuds enfants de l'élément qui est sélectionné par l'utilisateur et il me donne la valeur correcte que je peux voir de la déclaration d'alerte (child.length). Ensuite, je lance la boucle pour sélectionner tous les enfants, mais la boucle ne dépasse jamais la déclaration var x = child[i].select(true);

Et je ne peux jamais voir la déclaration alert(i) en cours d'exécution. Le résultat de la déclaration ci-dessus est que si je sélectionne package 1, le module 1.1 et le document 1.1.1 est également sélectionné, mais il exécute jamais l'instruction alert(i) - pas d'autres enfants du paquet 1 sont sélectionnés. À mon avis lorsque la déclaration de child[i].select(true) première fois est exécuté, il déclenche également l'événement sur sélection de ses enfants faisant ainsi une sorte de récursion de chose

Ma pensée correcte? Peu importe ce que récursion ou qu'est-ce qu'il fait, il ne termine pas la boucle et exécuter la très prochaine alert(i) d'instruction.

S'il vous plaît me aider à résoudre ce problème. Je meurs d'envie de voir cette alerte, toute suggestion et aide est très appréciée.

Answer 1

A peine testé, mais vous pouvez essayer quelque chose comme ceci:

$(function(){
    var inEventHandler = false;
    $("#tree").dynatree({
        checkbox: true,
        selectMode: 2,
        [...]
        onSelect: function(select, dtnode) {
            // Ignore, if this is a recursive call
            if(inEventHandler) 
                return;
            // Select all children of currently selected node
            try {
                inEventHandler = true;
                dtnode.visit(function(childNode){
                    childNode.select(true);
                });
            } finally {
                inEventHandler = false;
            }
        }

Answer 2

Bien qu'étant pas un expert des capacités internes de Dynatree, j'ai écrit un code qui génère panure pour le nœud cliquée et tous ses descendants.

Dans l'exemple ci-dessous, en cliquant sur "edibles" affichera:

edibles
edibles > fruits
edibles > fruits > apples
edibles > fruits > apples > green apples
edibles > fruits > apples > green apples > granny smith
edible > vegetables
edible > vegetables > potatoes

tout en cliquant sur "pommes vertes" affichera:

edibles > fruits > apples > green apples
edibles > fruits > apples > green apples > granny smith

Vous pouvez inspirer de cet exemple et récupérer les champs dont vous avez besoin de tous les documents pour enfants et générer votre sortie HTML.

Le code est dans ce fil:

Utilisez la fonction suivante à la place de celle de réponse Mar10.

Tous les nœuds enfants sont sélectionnées / désélectionnées sur le nœud parent sélectionner / désélectionner.

onSelect: function (isSelected, node) {
    node.visit(function (childNode) {
        childNode.select(isSelected);
    });
},

Answer 3

Answer 4

Answer 5

Answer 6

Answer 7

Utilisez la fonction suivante à la place de celle de réponse