web-dev-qa-db-fra.com

jsTree - chargement de sous-noeuds via ajax à la demande

J'essaie d'obtenir un jsTree avec le chargement à la demande des sous-nœuds. Mon code est le suivant:

 jQuery ('# introspection_tree'). jstree ({
 "json_data": {
 "ajax": {
 url: "http: // localhost/introspection/introspection/produit "
} 
}, 
" plugins ": [" thèmes "," json_data "," ui "] 
});

Le json revenu de l'appel est

 
 {
 "data": "Kit 1", 
 "attr": {
 "id": "1" 
}, 
 "enfants": 
 
 {
 "données": "Matériel", 
 "attr": { 
 "id": "2" 
}, 
 "enfants": 
 
 
} 
, 
 
 {
 "données": "Logiciel", 
 "attr": {
 "id": "3" 
}, 
 "enfants": 
 
 
} 
 
 
} 
 .....

Chaque élément pourrait avoir beaucoup d'enfants, l'arbre va être gros. Actuellement, cela charge tout l'arbre en même temps, ce qui peut prendre un certain temps. Que dois-je faire pour implémenter le chargement à la demande des nœuds enfants lorsqu'ils sont ouverts par l'utilisateur?

Merci d'avance.

ajaxjstree
31
Christian Waidner

Irishka m'a pointé dans la bonne direction, mais ne résout pas complètement mon problème. J'ai tripoté sa réponse et j'ai trouvé ça. L'utilisation de deux fonctions serveur différentes se fait uniquement pour plus de clarté. Le premier répertorie tous les produits au niveau supérieur, le second répertorie tous les enfants d'un ID de 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 renvoyées par les fonctions sont comme ceci (notez l'état = fermé dans chaque nœud):

 
 {
 "data": "Kit 1", 
 "attr": {
 "id": "1" 
}, 
 "état": "fermé" 
}, 
 {
 "données": "KPCM 049", 
 " attr ": {
" id ":" 4 "
}, 
" état ":" fermé "
}, 
 {
 "données": "Linux BSP", 
 "attr": {
 "id": "8" 
}, 
 "état": "fermé"
  }

Aucune donnée statique n'est nécessaire, l'arborescence est désormais entièrement dynamique à chaque niveau.

43
Christian Waidner

Je suppose que ce serait bien d'afficher par défaut les nœuds de premier niveau puis les enfants seront chargés à la demande. Dans ce cas, la seule chose que vous devez modifier est d'ajouter "state" : "closed" aux nœuds dont les nœuds enfants vont être chargés à la demande.

Vous souhaiterez peut-être envoyer l'ID du nœud dans l'appel ajax afin de modifier 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'))
            }
        }
    }
}

De jsTree documentation

REMARQUE: si les 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 nœud fermé (qui n'a pas d'enfants chargés), une demande AJAX est effectuée.

12
Radek

vous devez définir les éléments racine en tant que données d'arborescence lors du chargement de la page, puis vous pourrez 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 à ne question similaire ici (l'ancienne partie) pour plus de détails

10
Irishka

J'ai passé des heures sur ce problème. Enfin, je l'ai fait de cette façon:

$("#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"
    ]
  }
]

Je marque donc le nœud qui devient le parent du sous-arbre chargé ajax avec un identifiant, je regarde dans la configuration de base.

REMARQUE: ce nœud doit avoir le paramètre "state": "closed" et il doit avoir le paramètre "children": true.

J'utilise jsTree.js dans la version 3.3.3

2
Ruwen