Chargement paresseux avec jsTree
J'essaye de charger dynamiquement les noeuds d'un jtree quand ils sont développés. Le peu de documentation que j'ai trouvée se trouve à la fin de cette page .
J'ai trouvé des solutions qui créent les nœuds un à un avec une boucle comme celle-ci . Je n'ai pas essayé, mais en regardant dans la page de documentation, j'ai le sentiment que jstree devrait s'occuper de parcourir les nœuds.
J'ai trouvé de nombreuses solutions utilisant plugins: ["json_data"], mais la page de documentation des plugins } _ ne mentionne pas ce plugin. Est-ce un ancien plugin qui n'est plus nécessaire?
Mon implémentation actuelle utilise ce code pour charger l’arbre entier en un seul coup:
$.ajax({
var pn = $('#project_number').val();
url : "bomtree?part=" + pn,
success : function(tree_content) {
var data = $.parseJSON(tree_content);
var config = {
'core' : {
'data' : data
}
};
$('#bom_tree').jstree(config);
}
});
J'ai modifié le code sur la page de documentation comme ceci:
$(function() {
var pn = $('#project_number').val();
$('#tree').jstree({
'core' : {
'data' : {
'url' : function(node) {
return '/doc/test2';
},
'data' : function(node) {
return {
'part' : node.id === '#' ? pn : node.id
};
}
}
}
});
});
Le même texte json fonctionne avec le premier code, maintenant avec le second. La documentation dit The format remains the same as the above, donc je ne l'ai pas changé.
J'ai essayé aussi de retourner les mêmes données que dans l'exemple, ceci:
[
{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
]
Mais le résultat est le même: jquery jette un Sizzle.error à la ligne suivante:
Sizzle.error = function( msg ) {
throw new Error( "Syntax error, unrecognized expression: " + msg );
};
Où le contenu de msg correspond aux données JSON renvoyées par le serveur.
Qu'est-ce qui ne va pas?
"Lors de l'utilisation de AJAX, définissez les enfants sur boolean true et jsTree rendra le nœud fermé et fera une demande supplémentaire pour ce nœud lorsque l'utilisateur l'ouvrira." , ceci provient de jstree document et il pourrait répondre à vos besoins.
Je vais vous dire que la documentation et les exemples sont assez difficiles. J'ajouterai également que la source de votre confusion provient d'une mise à niveau majeure - la ancienne version n'a pas grand chose en commun avec la nouvelle version et, malheureusement, la plupart des exemples ont été écrits à partir de cette ancienne version.
La bonne nouvelle est que le chargement paresseux est pris en charge immédiatement, ce n'est pas si évident. La clé est qu'il appelle votre config data: lorsque chaque nœud est développé. Mais pour que cela fonctionne, la fonction URL doit renvoyer une URL différente pour le nœud donné. Dans le code ci-dessous, notez la condition pour renvoyer une URL si le nœud est root (#) et une autre si ce n'est pas le cas.
$('#TreeDiv')
.jstree({
core: {
data: {
url: function (node) {
return node.id === '#' ? '/UserAccount/AccountGroupPermissions'
: '/UserAccount/AccountPermissions/' + node.id;
},
type: 'POST'
}
},
plugins : ["checkbox"]
});
L'extension de Nathans répond avec un exemple (très minimaliste): L'arbre de démonstration avec chargement paresseux.
JS:
$('#the_tree').jstree({
'core' : {
'data' : {
'url' : "tree/ajax.php",
'data' : function (node) {
return { 'id' : node.id };
}
}
},
});
PHP:
header('Content-Type: application/json');
if ( $_GET["id"] === "#" ) {
$data = array(
array( "id" => "ajson1", "parent" => "#", "text" => "Simple root node" ),
array( "id" => "ajson2", "parent" => "#", "text" => "Root node 2", "children" => true ),
);
}
else if ( $_GET["id"] === "ajson2" ) {
$data = array(
array( "id" => "ajson3", "parent" => "ajson2", "text" => "Child 1" ),
array( "id" => "ajson4", "parent" => "ajson2", "text" => "Child 2" )
);
}
echo json_encode( $data);
seuls les nœuds qui ont "children" : true, généreront une demande pour les enfants lorsqu’ils seront ouverts, les autres nœuds seront traités comme des feuilles.
Pour effectuer un chargement paresseux, vous avez besoin d'un moteur qui renvoie un objet JSON avec des nœuds d'arborescence avec un champ de propriété enfants. La propriété Children doit contenir des éléments children ou boolean true (array ou boolean). Avec un langage fortement typé sur votre backend, il sera moche, il est donc préférable de le traiter en front-end. Exemple de AJAX callback de succès:
$('#tree').jstree({
'core' : {
'data' : {
'url' : function(node) {
return '/doc/test2';
},
'data' : function(node) {
return {
'part' : node.id === '#' ? pn : node.id
};
},
'success' : function(nodes) {
var validateChildrenArray = function(node) {
if (!node.children || node.children.length === 0) {
node.children = true;
}
else {
for (var i = 0; i < node.children.length; i++) {
validateChildrenArray(node.children[i]);
}
}
};
for (var i = 0; i < nodes.length; i++) {
validateChildrenArray(nodes[i]);
}
}
}
}
});
En faisant cela, vous pourrez charger votre arbre paresseux.
J'ai effectué mon chargement paresseux personnalisé en combinant l'événement "select_node.jstree" et la méthode "create_node". Lors de la sélection de chaque nœud, le gestionnaire d'événements vérifie s'il y a des enfants et ajoute la réponse du serveur au nœud sélectionné, nœud à nœud. La réponse de mon serveur n’était pas similaire, ni les exigences de jstree et cette stratégie m’a épargné beaucoup de temps et d’efforts. J'espère que cela aidera quelqu'un.