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

Question

J'ai un arbre. 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 façon 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)

Answer 1

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

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

Notez que je n'ai pas initialisé someNodeId en tant qu'objet jQuery. Il s'agit d'une simple chaîne de caractères.

Je l'ai fait juste après le chargement d'un arbre sans le placer dans un événement de liaison "ready", car il ne semble pas nécessaire de le faire.

J'espère que cela évitera à quelqu'un de passer quelques heures frustrantes. . .

S'accrocher à l'arbre une fois qu'il a été chargé :

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

Answer 2

Sur la base de 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 ont 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 vous recherchez ?

Answer 3

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);
});

Answer 4

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();

Answer 5

Si vous remplissez l'arbre en utilisant des données HTML plutôt que JSON et que vous vous demandez comment définir l'attribut node_id il suffit de définir l'attribut id de l'élément <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>

Entonces

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

sélectionnera l'option Node 3 - Level 2 nœud.

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

Pour tous les électeurs en baisse Voici la démo qui prouve que cela fonctionne : https://jsfiddle.net/davidliang2008/75v3fLbs/7/