Ricarica intero Fancytree

Question

Ho una casella combinata con diverse opzioni che ciascuna porta sullo schermo.

Faccio una chiamata ajax per ottenere l'origine per l'albero di fantasia ma non si ricarica e mostra sempre le stesse opzioni.

parte del codice:

$.ajax({ 
url: "get_treedata.php", 
type: "POST", 
data: { 
     id: id 
     }, 
success: function(json){ 
    console.log(json); 

    var mynodes = JSON.parse(json); 
    $('#t-board').fancytree(// t-board is my div container 
     { 
      source: mynodes, 
      ... // my other options 
    }); 
    } 
}); 

che il codice si trova all'interno di una funzione che io chiamo la "onchange" della mia casella combinata. Dimmi cosa ne pensi, e se ho bisogno di essere più specifico o qualcosa del genere.

Grazie in anticipo.

Answer 1

Non è possibile inizializzare nuovamente l'albero. Ma puoi aggiornare le opzioni dell'albero o ricaricarlo con la nuova opzione di origine.

• Ricarica l'albero con l'opzione nuova fonte

  var treeOptions = {...}; // initial options 
  $('#t-board').fancytree(treeOptions); 
  $('#combobox').change(function() { 
  var id = $('option:selected', this).val(); 
  
      var newSourceOption = { 
      url: 'get_treedata.php', 
      type: 'POST', 
      data: { 
       id: id 
      }, 
      dataType: 'json' 
      }; 
  
      var tree = $('#t-board').fancytree('getTree'); 
      tree.reload(newSourceOption); 
  }); 
  

• Aggiungere o sostituire altre opzioni albero

  var treeOptions0 = {...}; // initial options 
  var treeOptions1 = {...}; // other tree options 
  var treeOptions2 = {...}; 
  $('#t-board').fancytree(treeOptions0); 
  $('#combobox').change(function() { 
  
      var id = $('option:selected', this).val(); 
  
      if(id === '1'){ 
      $('#t-board').fancytree('option', 'selectMode', treeOptions1.selectMode); 
      $('#t-board').fancytree('option', 'renderNode', treeOptions1.renderNode); 
      $('#t-board').fancytree('option', 'icons', treeOptions1.icons); 
      //... 
      }else if(id === '2'){ 
      $('#t-board').fancytree('option', 'selectMode', treeOptions2.selectMode); 
      $('#t-board').fancytree('option', 'renderNode', treeOptions2.renderNode); 
      $('#t-board').fancytree('option', 'icons', treeOptions2.icons); 
      //... 
      } 
  }); 
  

Answer 2

Trovato tuo post durante la ricerca di una soluzione me stesso, e potrebbe non trovare nessuno sul web.

Ma ho solo pensato a un piccolo trucco e ha funzionato così nel caso in cui aiuta te o qualcun altro.

Basta rimuovere il div albero, poi rimetterlo e caricarlo di nuovo, qualcosa di simile:

$("#tree").remove(); 
$("#tree_container").append('<div id="tree"></div>'); 
get_tree(); 

Answer 3

È inoltre possibile modificare la sorgente albero senza cambiamenti altre opzioni utilizzando il seguente codice:

$('#t-board').fancytree('option', 'source', myJsonData); 

Ricordate che myJsonData deve essere un insieme di dati JSON validi come:

var myJsonSource = [ 
    {title: "Node 1", key: "1"}, 
    {title: "Folder 2", key: "2", folder: true, children: [ 
     {title: "Node 2.1", key: "3", myOwnAttr: "abc"}, 
     {title: "Node 2.2", key: "4"} 
    ]} 
    ]; 

https://github.com/mar10/fancytree/wiki#configure-options

Answer 4

Creare un contenitore div.

<div id="tree-container"> 
 
    <div id="tree" style="width: 100%;"></div> 
 
</div>

quindi svuotare il contenitore e aggiungere di nuovo nel div per l'albero. A questo punto inizializza l'albero di fantasia e caricherà le nuove impostazioni e il contenuto.

$("#tree-container").empty(); 
 
$("#tree-container").append('<div id="tree" style="width: 100%;"></div>'); 
 
// Initialize Fancytree 
 
$("#tree").fancytree({ 
 
...

Answer 5

this.$('.tree-wrapper').fancytree({ 
    source: [] 
    ... 
}); 
var tree = this.$('.tree-wrapper').fancytree('getTree'); 

Sul richiamata

tree.reload(mynodes) 

È necessario fornire un array vuoto per source sull'albero inizializzare.

Answer 6

FancyTree recupera JSON per sé, non è necessario farlo manualmente:

var id = 3; 

$('#t-board').fancytree({ 
    source: { 
     url: 'get_treedata.php', 
     type: 'POST', 
     data: { 
      id: id 
     }, 
     cache: false 
    } 
    ... // other options 
}); 

Quando è necessario passare un'altra id valore ai get_treedata.php e caricare dati in FancyTree, è sufficiente impostare nuova opzione sorgente e FancyTree ricaricati stessa:

id = 5; 

$('#t-board').fancytree('option', 'source', { 
    url: 'get_treedata.php', 
    type: 'POST', 
    data: { 
     id: id 
    } 
    cache: false 
}); 

modo più breve per ricaricare FancyTree:

$('#t-board').fancytree({ 
    url: 'get_treedata.php', 
    type: 'POST', 
    data: { 
     id: id 
    } 
    cache: false 
}); 

Ecco fatto. Felice codifica :)

P.S. Funziona su v2.26.0