jstree-chargement de sous-modes via ajax sur demande
j'essaie d'obtenir un jsTree travaillant avec le chargement à la demande de sous-codes. Mon code est le suivant:
jQuery('#introspection_tree').jstree({
"json_data" : {
"ajax" : {
url : "http://localhost/introspection/introspection/product"
}
},
"plugins" : [ "themes", "json_data", "ui" ]
});
Le json renvoyé par l'appel est
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"children": [
[
{
"data": "Hardware",
"attr": {
"id": "2"
},
"children": [
]
}
],
[
{
"data": "Software",
"attr": {
"id": "3"
},
"children": [
]
}
]
]
}
.....
]
Chaque élément peut avoir beaucoup d'enfants, l'arbre va être la grande. Actuellement, cela charge l'arbre entier à la fois, ce qui pourrait prendre un certain temps. Que dois-je faire pour mettre en œuvre le chargement à la demande des noeuds enfants lorsqu'ils sont ouverts par l'utilisateur?
Merci d'avance.
4 réponses
Irishka m'a pointé dans la bonne direction, mais ne résout pas entièrement mon problème. J'ai trafiqué sa réponse et j'ai trouvé ça. L'utilisation de deux fonctions de serveur différentes est faite seulement pour la clarté. La première liste tous les produits au niveau supérieur, la seconde liste tous les enfants d'un produit donné:
jQuery("#introspection_tree").jstree({
"plugins" : ["themes", "json_data", "ui"],
"json_data" : {
"ajax" : {
"type": 'GET',
"url": function (node) {
var nodeId = "";
var url = ""
if (node == -1)
{
url = "http://localhost/introspection/introspection/product/";
}
else
{
nodeId = node.attr('id');
url = "http://localhost/introspection/introspection/children/" + nodeId;
}
return url;
},
"success": function (new_data) {
return new_data;
}
}
}
});
les données JSON retournées des fonctions sont comme ceci (notez l'état = fermé dans chaque noeud):
[
{
"data": "Kit 1",
"attr": {
"id": "1"
},
"state": "closed"
},
{
"data": "KPCM 049",
"attr": {
"id": "4"
},
"state": "closed"
},
{
"data": "Linux BSP",
"attr": {
"id": "8"
},
"state": "closed"
}
]
Pas de données statiques est nécessaire, l'arbre est maintenant entièrement dynamique sur chaque niveau.
je suppose qu'il serait agréable d'afficher par défaut noeuds de premier niveau et ensuite les enfants seront chargés sur demande. Dans ce cas, la seule chose que vous devez modifier est d'ajouter "state" : "closed" aux noeuds dont les noeuds enfants vont être chargés à la demande.
vous pourriez vouloir envoyer l'id du noeud dans l'appel ajax donc vous modifiez votre code
"json_data": {
//root elements to be displayed by default on the first load
"data": [
{
"data": 'Kit 1',
"attr": {
"id": 'kit1'
},
"state": "closed"
},
{
"data": 'Another node of level 1',
"attr": {
"id": 'kit1'
},
"state": "closed"
}
],
"ajax": {
url: "http://localhost/introspection/introspection/product",
data: function (n) {
return {
"nodeid": $.trim(n.attr('id'))
}
}
}
}
à Partir de jsTree documentation
NOTE: Si les deux données et ajax sont définies, l'arborescence initiale est rendue à partir de la chaîne de données. Lors de l'ouverture d'un noeud fermé (qui n'a pas d'enfant chargé) une requête AJAX est faite.
vous avez besoin de définir des éléments racine que les données d'arbre sur le chargement de page et alors vous serez en mesure de récupérer leurs enfants avec une demande ajax
$("#introspection_tree").jstree({
"plugins": ["themes", "json_data", "ui"],
"json_data": {
//root elements
"data": [{"data": 'Kit 1', "attr": {"id": 'kit1'}} /*, ... */], //the 'id' can not start with a number
"ajax": {
"type": 'POST',
"data": {"action": 'getChildren'},
"url": function (node) {
var nodeId = node.attr('id'); //id="kit1"
return 'yuorPathTo/GetChildrenScript/' + nodeId;
},
"success": function (new_data) {
//where new_data = node children
//e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}]
return new_data;
}
}
}
});
voir ma réponse à une question similaire ici (l'ancienne partie) pour plus de détails
j'ai passé des heures sur ce problème. Finalement je l'ai eu comme ça:
$("#resourceTree").jstree({
"types": {
"default": {
"icon": "fa fa-folder-open treeFolderIcon",
}
},
"plugins": ["json_data", "types", "wholerow", "search"],
"core": {
"multiple": false,
"data": {
"url" : function(node){
var url = "rootTree.json";
if(node.id === "specialChildSubTree")
url = "specialChildSubTree.json";
return url;
},
"data" : function(node){
return {"id" : node.id};
}
}
},
});
rootTree.json:
[
{
"text": "Opened root folder",
"state": {
"opened": true
},
"children": [
{
"id" : "specialChildSubTree",
"state": "closed",
"children":true
}
]
}
]
specialChildSubTree.json:
[
"Child 1",
{
"text": "Child 2",
"children": [
"One more"
]
}
]
donc je marque le noeud qui devient le parent du sous-arbre chargé ajax avec un id, je surveille dans la configuration du noyau.
NOTE: Ce nœud doit avoir "l'état" : "fermé" paramètre et il doit avoir paramètre "enfants": vrai.
j'utilise jsTree.js dans la version 3.3.3