jsTree - caricamento di sottonodi tramite ajax su richiesta

Question

Sto cercando di ottenere un jsTree che funzioni con il caricamento su richiesta di sottonodi. Il mio codice è questo:

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

JSON restituito dalla chiamata è

 
[ 
    { 
    "data": "Kit 1", 
    "attr": { 
     "id": "1" 
    }, 
    "children": [ 
     [ 
     { 
      "data": "Hardware", 
      "attr": { 
      "id": "2" 
      }, 
      "children": [ 

      ] 
     } 
     ], 
     [ 
     { 
      "data": "Software", 
      "attr": { 
      "id": "3" 
      }, 
      "children": [ 

      ] 
     } 
     ] 
    ] 
    } 
    ..... 
] 

Ogni elemento potrebbe avere un sacco di bambini, l'albero sta per essere 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 nodi figlio quando vengono aperti dall'utente?

Grazie in anticipo.

Answer 1

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 di livello superiore, la seconda 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; 
      } 
     } 
    } 
}); 

il json dati restituiti dalle funzioni è così (notare lo stato = chiuso in ciascun nodo):

 
[ 
    { 
    "data": "Kit 1", 
    "attr": { 
     "id": "1" 
    }, 
    "state": "closed" 
    }, 
    { 
    "data": "KPCM 049", 
    "attr": { 
     "id": "4" 
    }, 
    "state": "closed" 
    }, 
    { 
    "data": "Linux BSP", 
    "attr": { 
     "id": "8" 
    }, 
    "state": "closed" 
    } 
] 

Nessun dato statico è necessario, l'albero è ora completamente dinamico su ciascun livello.

Answer 2

è necessario impostare elementi radice come dati albero su caricamento della pagina e quindi si sarà in grado di recuperare i loro 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 
       //e.g.: [{'data':'Hardware','attr':{'id':'child2'}}, {'data':'Software','attr':{'id':'child3'}}] 
       return new_data; 
      } 
     } 
    } 
}); 

Vedere la mia risposta alla a similar question here (la parte vecchia) per maggiori dettagli

Answer 3

Immagino che sarebbe bello visualizzare per impostazione predefinita nodi di primo livello e quindi i bambini verranno caricati su richiesta. In tal caso, l'unica cosa che devi modificare è aggiungere "state" : "closed" ai nodi i cui nodi figlio verranno caricati su richiesta.

Si potrebbe voler inviare id del nodo chiamata AJAX in modo da modificare il 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')) 
      } 
     } 
    } 
} 

Da jsTree documentazione

NOTA: Se vengono impostati i dati e ajax l'albero iniziale è reso dalla stringa di dati. Quando si apre un nodo chiuso (che non ha figli caricati) viene fatta una richiesta AJAX.

Answer 4

Ho trascorso ore su questo problema. Infine ho ottenuto 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" 
    ] 
    } 
] 

Così ho segnano il nodo che diventare il padre del ajax caricata sottostruttura con un ID, guardo nella configurazione principale.

NOTA: Questo nodo deve avere lo "stato": "chiuso" del parametro e deve avere il parametro "figli": vero.

Sto usando jsTree.js in versione 3.3.3