Gesamten Fancytree neu laden

Question

Ich habe eine Combobox mit verschiedenen Optionen, die jeweils einen Fantasybaum auf den Bildschirm bringt.

Ich mache einen Ajax-Aufruf, um die Quelle für die Phantasiebaum zu bekommen, aber es wird nicht neu geladen und zeigt die gleichen Optionen immer wieder.

Teil des Codes:

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

dass Code in einer Funktion, die ich in dem "onchange" meine Combobox nennen. Sag mir, was du denkst, und wenn ich genauer oder etwas sein muss.

Vielen Dank im Voraus.

Answer 1

Sie können den Baum nicht neu initialisieren. Sie können jedoch die Baumoptionen aktualisieren oder sie mit der neuen Quelloption neu laden.

• den Baum mit neuer Quelle Option

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

• hinzufügen oder ersetzen andere Baum Optionen

  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

gefunden Ihren Beitrag neu laden, während eine Lösung selbst suchen, und konnten finde keine im Internet.

Aber ich dachte nur an einen kleinen Trick und es hat funktioniert, falls es dir oder jemand anderem hilft.

Entfernen Sie einfach den Baum div, es dann zurückgestellt und es wieder laden, so ähnlich:

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

Answer 3

Sie können auch den Baum Quelle ohne andere Optionen ändern Ändern Sie den folgenden Code:

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

Denken Sie daran, dass myJsonData ein gültiges JSON-Daten wie sein muß:

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

Erstellen Sie einen Container div.

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

Dann leeren Sie den Behälter und zurück in den div für den Baum anhängen. An diesem Punkt initialisieren Sie den Fancy Tree und es lädt die neuen Einstellungen und den Inhalt.

$("#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'); 

Auf dem Rückruf

tree.reload(mynodes) 

Sie müssen ein leeres Array sorgen für source auf Baum initialisieren.

Answer 6

FancyTree holt JSON selbst, Sie es nicht manuell tun müssen:

var id = 3; 

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

Wenn Sie einen anderen id Wert get_treedata.php und Laden von Daten in FancyTree übergeben müssen, die Sie gerade neue Quelle Option und FancyTree gesetzt nachlädt selbst:

id = 5; 

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

Kürzere Weg FancyTree nachladen:

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

Das ist es. Glückliche Kodierung :)

P.S. Dies funktioniert auf v2.26.0