javascript - example - ¿Cómo puedo saber si jsTree se ha cargado completamente?

jstree min js example

Question

Estoy tratando de escribir una función que abre nodos específicos en un jsTree pero tengo un problema donde la función se ejecuta antes de que mi árbol base se cargue desde la llamada ajax. ¿Cómo puedo saber si mis datos de jstree se han cargado y esperar hasta que termine de cargarse? A continuación se muestra la función que estoy tratando de utilizar.

function openNodes(tree, nodes) {
for (i in nodes) {
$(''#navigation'').jstree("open_node", $(nodes[i]));
}
}

Estoy cargando mi árbol inicial con el siguiente comando

$("#navigation").jstree({
"json_data": {
"ajax": {
"url": function(node) {
var url;
if (node == -1) {
url = "@Url.Action("BaseTreeItems", "Part")";
} else {
url = node.attr(''ajax'');
}
return url;
},
"dataType": "text json",
"contentType": "application/json charset=utf-8",
"data": function(n) { return { id: n.attr ? n.attr("id") : 0, ajax: n.attr ? n.attr("ajax") : 0 }; },
"success": function() {
}
}
},
"themes": { "theme": "classic" },
"plugins": ["themes", "json_data", "ui"]
});

Answer 1

Antes de llamar a .jstree () en un elemento, puede enlazar sus devoluciones de llamada a los eventos before.jstree y loaded.jstree :

$(selector)
.bind(''before.jstree'', function(e, data) {
// invoked before jstree starts loading
})
.bind(''loaded.jstree'', function(e, data) {
// invoked after jstree has loaded
$(this).jstree("open_node", $(nodes[i]));
})
.jstree( ... )

Answer 2

En las versiones más recientes de jstree, es posible que deba esperar hasta que todos los nodos hayan terminado de cargarse antes de interactuar con ellos. Para ello necesitas:

ready.jstree

Asi que:

$(selector)
.bind(''ready.jstree'', function(e, data) {
// invoked after jstree has loaded
})
...

Answer 3

Es mejor que llame a la función $ .ajax () para obtener los datos que desea al principio, puede llamar a la función $ (). Jstree () en el campo de éxito: como debajo de mi código.

 var fullTree;
$.ajax({
url :"./php/select_tree.php",
data : fullTree,
method : "GET",
dataType : "json",
success : function(fullTree){
$("#jstree").jstree({
"core" : {
"data" :fullTree,
"check_callback" : true
},
"plugins" : [ "contextmenu", "dnd", "changed", "wholerow" ]
});
}
})
;

Answer 4

No tienes que añadir un intervalo. El complemento establece una clase en el nodo que se está cargando a través de ajax.

.one("reselect.jstree", function (evt, data) {
if ($("#MYTREEID").find(".jstree-loading").length == 0) {
alert(''my ajax tree is done loading");
}
})

Answer 5

Usé setInterval y clearInterval:

var interval_id = setInterval(function(){
// $("li#"+id).length will be zero until the node is loaded
if($("li#"+id).length != 0){
// "exit" the interval loop with clearInterval command
clearInterval(interval_id)
// since the node is loaded, now we can open it without an error
$("#tree").jstree("open_node", $("li#"+id))
}
}, 5);

La devolución de llamada ".loaded" de JStree solo funciona para nodos raíz; "._is_loaded" puede funcionar en lugar de verificar la longitud del nodo, pero no lo he intentado. De cualquier manera, la configuración de la animación hace que los nodos que están más profundos en el árbol se carguen unos milisegundos después. El comando setInterval crea un bucle temporizado que sale cuando se cargan los nodos deseados.

Answer 6

[Descargo de responsabilidad: esto no se aplica al OP ya que el complemento de estado no se encuentra en el código de configuración.]

Si está utilizando el complemento de estado, use el evento state_ready.jstree en lugar de los eventos ready.jstree o loaded.jstree.

$(selector).on(''state_ready.jstree'', function () {
// open desired node
}

Answer 7

refresh.jstree evento refresh.jstree en mi caso (necesito cambiar dinámicamente y actualizar los nodos en jstree muy a menudo).

Según el documento,

se activa cuando se completa una llamada de actualización

jsTree Doc (Eventos)

Código de muestra:

$.post( [url], ... ).done(function(){ $jstree.jstree().settings.core.data = result; $jstree.jstree().refresh(); }); $(selector).on(''refresh.jstree'', function(){ // do something });