web-dev-qa-db-fra.com

Comment sélectionner un nœud spécifique par programme?

J'ai un jstree. Je veux sélectionner le nœud qui est lié à l'objet qui a un emplacement avec l'ID de 158. Cela fonctionne mais semble stupide. Quelle est la manière la plus idiomatique de procéder?

var $tree = $('.jstree', myContext),
    node = $tree.find('li').filter(function() { 
        return ( $(this).data().location || {}).id === 158;
    });
$tree.jstree('select_node', n)
jstree
36
George Mauer

Je voulais juste sonner ici car aucune des réponses n'a fonctionné pour moi. Ce qui finalement DID travail était très simple:

$('#someTree').jstree('select_node', 'someNodeId');

Notez que je n'ai pas initialisé someNodeId en tant qu'objet jQuery. C'est juste une chaîne simple.

Je l'ai fait juste après le chargement d'un arbre sans en le mettant dans un événement de liaison "prêt" car cela ne semble pas nécessaire.

J'espère que cela sauve quelqu'un de quelques heures frustrantes. . .

Pour vous accrocher à l'arborescence après son chargement:

.on('loaded.jstree', function() {
    // Do something here...
  });
36
Matt Cashatt

Basé sur groupes jsTree vous pouvez essayer

jQuery("#getStartedTree").jstree("select_node", "#test2");

si les données ressemblent

The JSON in the TextFile.txt - borrowed from your simple example
 [
     {
     "data" : "A node",
     "children" : [ "Child 1", "Child 2" ]
     },
     {
     "attr" : { "id" : "test1" },
         "data" : {
             "title" : "Long format demo",
             "attr" : { "id" : "test2", "href" : "#" }
         }
     }
 ]

et jsTree mis en place

My tree container is <div id="getStartedTree">

My jsTree code
 $("#getStartedTree").jstree({
            "themes": {
                "theme": "default",
                "url": "../App_Css/Themes/Default/style.css",
                "dots": true,
                "icons": true
            },
            "json_data": {
                "ajax": {
                    "url": "../SiteMaps/TextFile.txt",
                    "dataType": "json",
                    "data": function(n) {
                        return { id: n.attr ? n.attr("id") : 0 };
                    }
                }
            },
            "plugins": ["themes", "json_data", "ui"]
        });

C'est ce que tu cherches?

20
Radek

J'ai pu simuler un clic sur un nœud jstree comme moyen alternatif de sélectionner un nœud. Le code suivant est ce qui a été utilisé:

$(treeIdHandle + " li[id=" + nodeId + "] a").click();
3
Suketu Bhuta

Je l'ai fait avec:

$('.jstree').jstree(true).select_node('element id');

ce code:

jQuery.each(produto.categorias, function(i, categoria) {
    $('#lista-categorias').jstree(true).select_node(categoria.dadoCategoria.id);
});
3
Alberto Cerqueira

Si vous remplissez l'arborescence à l'aide de HTML au lieu de données JSON et que vous vous demandez comment définir le node_id, il vous suffit de définir l'attribut id du <li> élément!

<div class="tree-menu">
    <ul class="menu">
        <li id="node_1">
            Node 1 - Level 1
           <ul class="menu">
               <li id="node_3">
                   Node 3 - Level 2
               </li>
           </ul>
        </li>
        <li id="node_2">
            Node 2 - Level 1
        </li>
    </ul>
</div>

Ensuite

$('.tree-menu')
    .jstree(true)
    .select_node("node_3");

sélectionnera le Node 3 - Level 2 noeud.

Pour ceux qui obtiennent des erreurs javascript , n'oubliez pas d'utiliser la version complète de jQuery, pas la version slim!

Pour tous votants , voici la démo pour prouver que ça marche: https://jsfiddle.net/davidliang2008/75v3fLbs/7/

enter image description here

2
David Liang

j'utilise jstree 3.0.8. n'utilisez pas "état"

 'plugins': ['dnd', 'sort', 'types', 'contextmenu', 'wholerow', 'ui']

et le serveur offrent le json, le nœud sélectionné a

 "état": {"sélectionné": vrai, "ouvert": vrai}
2
weijia

Cette solution fonctionne pour moi

// after the tree is loaded
$(".jstree").on("loaded.jstree", function(){
    // don't use "#" for ID
    $('.jstree').jstree(true).select_node('ElementId');
});

et même dans une boucle php (dynamiquement):

$(".jstree").on("loaded.jstree", function(){
    <?php foreach($tree as $node): ?>
        $('.jstree').jstree(true).select_node('<?=$node?>');
    <?php endforeach;?>
});

J'espère que cela fonctionne pour toi.

1
Khaled Ali