JsTree Abra un nodo y luego seleccione un nodo secundario (usando json_result)

Question

Tengo problemas con un JsTree que estoy usando en un proyecto de MVC2. Me gustaría crear una función para deseleccionar/cerrar todos los nodos en el árbol. A continuación, abra un nodo específico y seleccione un nodo secundario específico (tengo los valores Id para ambos).

El problema es que el nodo de selección siempre se invoca antes de que finalice el nodo de apertura, por lo que el nodo no se selecciona, ya que el árbol aún no ha cargado los datos y la identificación del nodo no existe.

Intenté esta función por primera vez.

$('#demo3').jstree('deselect_all'); 
$('#demo3').jstree('close_all'); 
$('#demo3').jstree("open_node", $('#ParentId'), false, true); 
$('#demo3').jstree("select_node", $('#ChildId')); 

Entonces intenté mover el código a los select_node y se une move_node del árbol, pero no hubo suerte. En este momento estoy atascado usando setTimeout(), que es una solución horrible.

¿Alguien sabe cómo puedo decirle al árbol que solo seleccione el nodo una vez que haya finalizado la apertura?

Answer 1

usted podría intentar pasar una función que selecciona el nodo como una devolución de llamada como:

$('#demo3').jstree('open_node', '#ParentID', function(e, data) { 
    $('#demo3').jstree('select_node', '#ChildId'); 
}, true); 

De esta manera select_node se llamará una vez que el open_node regresa éxito.

Answer 2

Actualmente lo estoy usando en un proyecto MVC4.

si configura la función open_node para cargar el nodo JSON (en el complemento "core" establece load_open en true), entonces el nuevo nodo agregado existe en el servidor pero su elemento DOM todavía no se debe a que open_node la función no termina su trabajo. Por lo tanto, debe esperar o usar un segundo parámetro (devolución de llamada exitosa). En la devolución de llamada, el nuevo nodo procesado en el árbol DOM y su selector son válidos.

jsTree muestra de configuración:

"core": { 
    "open_parents": true, 
    "load_open": true 
} 

Mi código de trabajo:

$("iframe#UploadTarget").load(function() { 
    var result = jQuery.parseJSON($(this).contents().text()); 
    if (result.Result == true) { 
    $("#uploadDialog").dialog("close"); 
    var tree = jQuery.jstree._focused(); 

    /* 
     open_node will open the parent, get the childs from the server 
     (controller) and renders the new item before the callback executed, 
     so the jQuery selector will be valid 
    */ 

    tree.open_node(result.ParentId,/*CALLBACK*/ function() { 
      var newNode = $("#" + result.Id); 
      tree.select_node(newNode, false, null); 
    }); 

    } else { 
     alert(result.Result + ":" + result.ResultDescription); 
    } 

});//GOOD LUCK :-) 

Answer 3

esperanza que esto podría ayudar, y lo siento, no estoy usando JSON. Estoy usando jstree junto con la función para abrir nodos haciendo clic en elementos externos desde el html de jstree.

cada nodo en nuestra configuración es como una página web, por lo que en la página de inicio del panel de control tenemos una lista de las páginas recientemente editadas.

cada uno de estos enlaces tiene este Javascript para ejecutar

<a href="javascript: selectLeftNavNode(339);">Edit</a> 

donde 339 es el ID de la página que queremos editar

y esto es función de la noche de hogar que solía ser ejecutado

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     $('#demo').jstree('select_node', '#node_' + node); 
} 

El problema que notamos recientemente es que si la página editada recientemente está en el interior del árbol, más específicamente en la sección que aún no se ha cargado, fallará

esto es por eso que decidí hacer una petición Ajax al servidor con el fin de recuperar toda la ID de padre

cambiado código de abajo, el Ajax en mi caso devolverá algo como esto xml mirando

<?xml version="1.0" encoding="UTF-8"?> 
<response> 
<paths> 
<path>339</path> 
<path>338</path> 
<path>38</path> 
</paths> 
</response> 

y la función

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     if($('#demo').jstree('select_node', '#node_' + node) === false) 
     { 
      // if it is false means that the node is not yet rendered 
      // so instead of loading we will require to get list of parent nodes to open in order, then it will become available 
      // an ajax call should get us all the nodes 
      $.ajax({ 
       type: "POST", 
       dataType: "xml", 
       url: your_url_to_php_script', 
       data: {node_id:node}, 
       success: function(data) 
       { 
        var remaining_nodes = new Array(); 
        var paths_count = $(data).find('response').find('path').length; 
        for(var x=1;x<=paths_count;x++){ 
         remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text(); 
        } 

        open_nodes_step_by_step(remaining_nodes); 
       } 
      }); 
     } 
    } 

y además de que una función que es devuelto a través de devoluciones de llamada de open_node, la función abre nodo por nodo y cuando golpea t que la última entrada que debe ser el ID de nodo real que queremos para seleccionarlo utilizará select_node lugar

function open_nodes_step_by_step(remaining_nodes) 
{ 
    var nodes = remaining_nodes.slice(); 
    tree = jQuery.jstree._focused(); 
    if(nodes.length > 1){ 
     var nodes_left = remaining_nodes.slice(); 
     nodes_left.pop(); 
     var to_open = nodes.length - 1; 
     tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function() { 
      open_nodes_step_by_step(nodes_left); 
     }); 
    } 
    else{ 
     tree.select_node('#node_' + nodes[0]); 
    } 
} 

he probado mi solución con IE8, FF y Chrome todo parece estar funcionando muy bien, por encima de eso i use jQuery v1.10.1 y jsTree 1.0-rc1 (desafortunadamente, como el código ha estado allí durante años y tiene toda esa base de datos y otras integraciones, decidí no cambiar a versiones más nuevas, funciona)

espero que haya ayudado alguien

Tom