jsTree – caricamento di sottonodes tramite ajax su richiesta

Sto cercando di ottenere un jsTree che funzioni con il caricamento on demand dei sottonodes. Il mio codice è questo:

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

Il json restituito dalla chiamata è

 [
   {
     "dati": "Kit 1",
     "attr": {
       "id": "1"
     },
     "bambini": [
       [
         {
           "dati": "Hardware",
           "attr": {
             "id": "2"
           },
           "bambini": [

           ]
         }
       ],
       [
         {
           "dati": "Software",
           "attr": {
             "id": "3"
           },
           "bambini": [

           ]
         }
       ]
     ]
   }
   .....
 ]

Ogni elemento potrebbe avere molti figli, l’albero sarà grande. Attualmente questo sta caricando l’intero albero in una sola volta, il che potrebbe richiedere del tempo. Cosa devo fare per implementare il caricamento su richiesta dei nodes figlio quando vengono aperti dall’utente?

Grazie in anticipo.

Irishka mi ha indirizzato nella giusta direzione, ma non risolve completamente il mio problema. Ho trafficato con la sua risposta e mi sono inventato questo. L’utilizzo di due diverse funzioni del server viene eseguito solo per chiarezza. Il primo elenca tutti i prodotti al massimo livello, il secondo elenca tutti i figli di un dato productid:

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; } } } }); 

I dati json restituiti dalle funzioni sono come questo (notare lo stato = chiuso in ogni nodo):

 [
   {
     "dati": "Kit 1",
     "attr": {
       "id": "1"
     },
     "stato": "chiuso"
   },
   {
     "dati": "KPCM 049",
     "attr": {
       "id": "4"
     },
     "stato": "chiuso"
   },
   {
     "data": "Linux BSP",
     "attr": {
       "id": "8"
     },
     "stato": "chiuso"
   }
 ]

Non sono necessari dati statici, l’albero è ora completamente dinamico su ogni livello.

Immagino che sarebbe bello visualizzare di default i nodes di primo livello e poi i bambini verranno caricati su richiesta. In tal caso, l’unica cosa che devi modificare è aggiungere "state" : "closed" ai nodes i cui nodes figli verranno caricati su richiesta.

Potresti voler inviare l’id del nodo in una chiamata ajax in modo da modificare il tuo codice

 "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')) } } } } 

Dalla documentazione di jsTree

NOTA: Se vengono impostati sia i dati che ajax, l’albero iniziale viene sottoposto a rendering dalla stringa di dati. Quando si apre un nodo chiuso (che non ha figli caricati) viene fatta una richiesta AJAX.

è necessario impostare gli elementi radice come dati dell’albero al caricamento della pagina e quindi sarà ansible recuperare i propri figli con una richiesta 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 //eg: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}] return new_data; } } } }); 

Vedi la mia risposta a una domanda simile qui (la parte vecchia) per maggiori dettagli

Ho passato ore su questo problema. Finalmente ho capito in questo modo:

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

Quindi contrassegno il nodo che diventa il genitore della sottostruttura caricata con Ajax con un ID, che osservo nella configurazione principale.

NOTA: quel nodo deve avere il parametro “stato”: “chiuso” e deve avere il parametro “figli”: vero.

Sto usando jsTree.js nella versione 3.3.3