Comment savoir si jsTree est chargé?
j'essaye d'écrire une fonction qui ouvre des noeuds spécifiques sur un jsTree mais j'ai un problème où la fonction est exécutée avant que mon arbre de base soit chargé à partir de l'appel ajax. Comment puis-je savoir si mes données jstree ont été chargées et attendre qu'elles le soient. Ci-dessous est la fonction que j'suis en train d'utiliser.
function openNodes(tree, nodes) {
for (i in nodes) {
$('#navigation').jstree("open_node", $(nodes[i]));
}
}
je charge mon arbre initial avec la commande suivante
$("#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"]
});
6 réponses
j'ai utilisé setInterval et 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);
Jstree's".chargé" de rappel ne fonctionne que pour les nœuds racine; "._is_loaded " peut fonctionner au lieu de vérifier la longueur du noeud, mais je ne l'ai pas essayé. D'une manière ou d'une autre, les paramètres d'animation provoquent le chargement de noeuds plus profonds dans l'arbre quelques millisecondes plus tard. La commande setInterval crée une boucle chronométrée qui se termine lorsque le(s) noeud (s) désiré (s) est chargé.
avant d'appeler .jstree() sur un élément, vous pouvez lier vos rappels à before.jstree et loaded.jstree événements:
$(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( ... )
dans les versions les plus récentes de jstree, vous devrez peut-être attendre que tous les noeuds aient terminé le chargement avant d'interagir avec eux. Pour ce faire, vous avez besoin de:
ready.jstree
Donc:
$(selector)
.bind('ready.jstree', function(e, data) {
// invoked after jstree has loaded
})
...
Vous feriez mieux d'appeler $.ajax() pour obtenir les données que vous voulez à tout d'abord, vous pouvez appeler $().jstree() fonction dans le succès: champ comme ci-dessous mon code.
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" ]
});
}
})
;
Vous n'avez pas à ajouter un intervalle. Le plugin définit une classe sur le noeud qu'il charge via ajax.
.one("reselect.jstree", function (evt, data) {
if ($("#MYTREEID").find(".jstree-loading").length == 0) {
alert('my ajax tree is done loading");
}
})
[Avertissement: ceci ne s'applique pas à l'OP, puisque l'état plugin n'est pas répertorié dans le code d'installation.]
si vous utilisez le plugin d'état, utilisez state_ready.jstree event au lieu de The ready.jstree ou loaded.jstree événements.
$(selector).on('state_ready.jstree', function () {
// open desired node
}