jsTree come cambiare ajax URL e ricaricare i dati

$('#jstree_demo_div2').jstree({ 
     'core': { 
      'data': { 
       "url": "tree.ashx?id=" + _id, 
       "dataType": "json" // needed only if you do not supply JSON headers 
      } 
     }, 
     "checkbox": { 
      'visible': true, 
      'keep_selected_style': false, 
     }, 
     "plugins": ["wholerow", "checkbox"] 
    });

ho bisogno di modificare l'URL (o la variabile _id cambierà) e poi aggiornare i dati. Ma sembra che ci sia un problema con la cache.jsTree come cambiare ajax URL e ricaricare i dati

Ho monitorato la richiesta HTTP, la richiesta parametro _id non è stata modificata.

Ho provato

'core': { 
       'data': { 
        "url": "tree.ashx?id=" + _id, 
        "cache":false, //←←←← 
        "dataType": "json" // needed only if you do not supply JSON headers 
       } 
      },

e non ha funzionato.

BTW, la mia versione jsTree.js è 3.0.8.

fonte

2014-11-04 wtf512

E beform Io uso '$ ('# jstree_demo_div2'). Jstree ('aggiorna');' per rifare i dati, il parametro '_id' è stato modificato. – wtf512

spero che questo aiuti: http://stackoverflow.com/questions/26270239/creating-dynamic-jstree-using-alternative-json-format-stored-in-array/26299310#26299310 è possibile memorizzare l'ajax restituito json nella variabile arrayCollection –

effettuare una normale chiamata jquery ajax e ogni volta che si effettua una chiamata ajax con nuovo url, assegnare la risposta a arrayCollection e aggiornare l'albero in questo modo: $ ('# jstree'). Jstree (true) .settings.core.data = arrayCollection ; $ ('# Jstree') jstree (vero) refresh().; –

Sto usando il seguente codice per testare il tuo caso d'uso. Sta rinfrescando il jstree senza far crollare l'intero albero.

<!DOCTYPE html> 

<html> 
    <head> 
     <title>JSTree</title> 
     <link rel="stylesheet" href="dist/themes/default/style.css" /> 
     <script src="dist/libs/jquery.js"></script> 
     <script src="dist/jstree.js"></script> 
     <script> 
      var arrayCollection; 
      $(function() { 
       arrayCollection = [ 
        {"id": "animal", "parent": "#", "text": "Animals"}, 
        {"id": "device", "parent": "#", "text": "Devices"}, 
        {"id": "dog", "parent": "animal", "text": "Dogs"}, 
        {"id": "lion", "parent": "animal", "text": "Lions"}, 
        {"id": "mobile", "parent": "device", "text": "Mobile Phones"}, 
        {"id": "lappy", "parent": "device", "text": "Laptops"}, 
        {"id": "daburman", "parent": "dog", "text": "Dabur Man", "icon": "/"}, 
        {"id": "dalmatian", "parent": "dog", "text": "Dalmatian", "icon": "/"}, 
        {"id": "african", "parent": "lion", "text": "African Lion", "icon": "/"}, 
        {"id": "indian", "parent": "lion", "text": "Indian Lion", "icon": "/"}, 
        {"id": "apple", "parent": "mobile", "text": "Apple IPhone 6", "icon": "/"}, 
        {"id": "samsung", "parent": "mobile", "text": "Samsung Note II", "icon": "/"}, 
        {"id": "lenevo", "parent": "lappy", "text": "Lenevo", "icon": "/"}, 
        {"id": "hp", "parent": "lappy", "text": "HP", "icon": "/"} 
       ]; 
       $('#jstree').jstree({ 
        'core': { 
         'data': arrayCollection 
        }, 
        "checkbox": { 
         'visible': true, 
         'keep_selected_style': false 
        }, 
        "plugins": ["wholerow", "checkbox"] 
       }); 
      }); 
      function resfreshJSTree() { 
       $('#jstree').jstree(true).settings.core.data = arrayCollection; 
       $('#jstree').jstree(true).refresh(); 
      } 
      function addNokia() { 
       var nokia = {"id": "nokia", "parent": "mobile", "text": "Nokia Lumia", "icon": "/"}; 
       arrayCollection.push(nokia); 
       resfreshJSTree(); 
      } 
      function deleteDalmatian() { 
       arrayCollection = arrayCollection 
         .filter(function(el) { 
          return el.id !== "dalmatian"; 
         }); 
       resfreshJSTree(); 
      } 
     </script> 
    </head> 
    <body> 
     <input type="button" onclick="addNokia()" value="Add Nokia"/> 
     <input type="button" onclick="deleteDalmatian()" value="Delete Dalmatian"/> 
     <div id="jstree"></div> 
    </body> 
</html>

Nota:
Dopo aver aperto la pagina di cui sopra in un browser, aprire tutti i nodi e nodi figlio del jstree.
Fare clic sul pulsante Aggiungi Nokia.
Aggiungerà il nodo Nokia Lumia al nodo Mobile Phones senza comprimere il nodo albero-radice .
Analogamente fare clic sul pulsante Elimina Dalmaitian.
Ed eliminerà il nodo dalmata dal nodo Dogs e aggiorna la struttura per visualizzare la nuova struttura senza eseguire il collasso sul nodo radice.

fonte

2014-11-17 06:52:49

Il codice che risponde alla domanda è solo il contenuto del 'resfreshJSTree' funzione. '$ ('# jstree'). jstree (true) .settings.core.data = 'put/the/url/here.json';' e '$ ('# jstree'). jstree (true) .refresh ( –

Che cosa ha funzionato per me: '$ ('# jstree'). Jstree (true) .settings.core.data = {'url': 'put/the/url/here.json'};' –

$ ('# jstree'). jstree (true) .settings.core.data.url = 'put/the/url/here.json'; –

jsTree come cambiare ajax URL e ricaricare i dati

risposta

Problemi correlati