example - jstree themes

¿Cómo seleccionar un nodo específico programáticamente?

Question

Tengo un jstree. Quiero seleccionar el nodo que está vinculado al objeto que tiene una ubicación con id de 158. Esto funciona, pero parece estúpido. ¿Cuál es la forma más idiomática de hacer esto?

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

Answer 1

En base a jsTree groups puedes probar

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

si los datos se ven como

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" : "#" }
         }
     }
 ] 

y jsTree configurado

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

¿Es eso lo que buscas?

Answer 2

Esta solución funciona para mí

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

e incluso en un bucle php (dinámicamente):

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

Espero que esto funcione para usted.

Answer 3

Lo hice con:

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

este código:

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

Answer 4

Pude simular un clic en un nodo jstree como una forma alternativa de seleccionar un nodo. El siguiente código es lo que se usó:

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

Answer 5

Si está completando el árbol utilizando HTML en lugar de datos JSON y preguntándose cómo establecer el node_id , ¡solo necesita establecer el atributo id del elemento <li> !

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

seleccionará el Node 3 - Level 2 .

Answer 6

Solo quería sonar aquí ya que ninguna de las respuestas funcionó para mí. Lo que finalmente el trabajo de DID fue muy simple:

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

Tenga en cuenta que no someNodeId como un objeto jQuery. Es solo una cadena simple.

Hice esto justo después de cargar un árbol sin ponerlo en un evento de enlace "listo", ya que parece que no es necesario.

Espero que salve a alguien de unas pocas horas frustrantes. . .

Para enganchar en el árbol después de que se haya cargado:

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

Answer 7

yo uso jstree 3.0.8. no use ''estado''

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

y el servidor ofrece el json, el nodo seleccionado tiene

"state":{"selected":true,"opened":true}