JS Tree - select_node no funciona

Question

Tengo un extraño problema con JSTree y Ajax.

genero mi árbol a través de una petición/PHP Ajax que genera HTML (UL, Li, etiquetas) usando ...

$.ajax({ 
    url: 'ajaxTreeView.php?method=edit&partid='+partId, 
    cache: false, 
    success: function(tree) 
    { 
     $('#treeViewer').html(tree); 
    }}); 

y activar JStree en el código usando ...

options = 
{ 
    "core": { animation: 120 }, 
    "themes": { theme: 'corral', dots: true }, 
    "types": 
    { 
     "types": 
     { 
      "parent": { "icon": { "image": "images/custom/Legend/node_select.png" } }, 
      "child": { "icon": { "image": "images/custom/Legend/node_select_child.png" } }, 
      "current": { "icon": { "image": "images/custom/Legend/node.png" } } 
     } 
    }, 
    "plugins": [ "html_data", "types", "themes", "ui", "contextmenu", "cookies" ], 
    "ui": { "select_limit" : 1 }, 
    "cookies": { "save_selected" : false } 
}; 

$("#tree").jstree(options); 

Parece que no puedo obtener un nodo para seleccionar fácilmente. Intenté inicialmente_seleccionar, pero parece que no funciona y tampoco es ideal ya que a menudo quiero seleccionar el nodo programáticamente.

He intentado utilizar ...

$('#tree').jstree("select_node", '#ref565', true); 

Esto funciona si llamo a la función a través de un hipervínculo, pero no funciona si lo llamo después initalise JStree.

Veo por la adición de una alerta (todo esto sucede en la rutina Ajax Éxito) ...

$('#treeViewer').html(tree); 
$("#tree").jstree(options); 
alert('test'); 
$('#tree').jstree("select_node", '#ref565', true); 

... que el árbol no ha rendido ante la alerta se inicia.

he añadido un setTimeOut ...

$('#treeViewer').html(tree); 
$("#tree").jstree(options); 
setTimeout(function() {selectNode(565);},1250); 
$('#tree').jstree("select_node", '#ref565', true); 

... esto funciona.

claramente estoy siendo estúpido. ¿Estoy usando la sintaxis incorrecta? ¿Por qué tendría que establecer un retraso para seleccionar un nodo?

Por favor ayuda.

Answer 1

Si desea seleccionar inicialmente ciertos nodos después de cargar el árbol, se supone que debe utilizar la opción initially_select del complemento ui. Dijiste que lo intentaste, pero no veo que se use en el código de muestra que publicaste. ¿Estás seguro de que estás proporcionando los ID correctos?

Para seleccionar los nodos por programación, debe esperar a que los nodos que desea seleccionar aparezcan primero en el DOM. En lugar de usar una devolución de llamada de tiempo de espera, supongo que es más correcto vincularse al evento loaded.jstree, que debería llamarse después de que el árbol haya terminado de cargarse y todos los elementos de árbol estén en el DOM, y haga su selección programática allí .

Ejemplo de código que muestra el uso de:

$(function() { 

    $("#tree") 
     .jstree({ 
      // List of active plugins 
      "plugins" : [ 
       "ui" 
      ], 

      // UI & core - the nodes to initially select and open will be overwritten by the cookie plugin 
      // the UI plugin - it handles selecting/deselecting/hovering nodes 
      "ui" : { 
       // this makes the node with ID node_4 selected onload 
       "initially_select" : [ "#ref565" ] 
      }, 
      // the core plugin - not many options here 
      "core" : { 
       // just open those two nodes up 
       // as this is an AJAX enabled tree, both will be downloaded from the server 
       "initially_open" : [ "#ref565" ] 
      } 
     }) 
     .bind("loaded.jstree", function (e, data) { 
        $('#tree').jstree("select_node", '#ref565', true); 
     }) 
});