Wie laden/Aktualisieren/Reinit -Dynatree neu?

Question

Wenn ich Folgendes mache

$('#tree').dynatree("option","initAjax",{url:"http://google.com"});

Ich möchte, dass Dynatree aktuelle Baumdaten vergessen und stattdessen neue Daten aus der angegebenen URL neu laden. Aber ich finde, dass es standardmäßig nicht tut.

Vielen Dank.

Answer 1

schaue auf die tree.reload() Methode sollte das tun, wonach Sie suchen.

Siehe die Dokumente hier: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

Wie in den Dokumenten ist der Baum die interne Zeichnung des Baumes, und Sie erhalten ihn, indem Sie den Befehl getree aufrufen: $("#node").dynatree("getTree")

Answer 2

tree.reload(); ist für Daten dynamisch wie in Ajax geladen. Wenn Sie mit UL/Li -Listen arbeiten und Ihren Baum neu laden müssen, müssen Sie:$("#tree").dynatree("destroy"); Vor Ihr regulärer Dynatree -Erstellungscode. Der Zerstörungsparameter ist nicht dokumentiert (siehe http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

Answer 3

Funktionieren Sie die Initialisierung:

function InitTree() {
   $("#tree3").dynatree({
       (...init params...)
   });
}

InitTree();

Um Daten neu zu laden, rufen Sie an:

$("#tree3").dynatree("destroy");
InitTree();

Answer 4

Diese Frage ist ein Duplikat von Der Versuch, Dynatree mit neuen Daten neu zu laden/neu zu laden

Meine Lösung erfordert keine Umwege wie empty() und destroy() usw. Denken Sie darüber nach: Wenn der Dynatree erstellt wird, geben Sie ein Wörterbuch für Einstellungen an, das er verwenden muss. Da es sich jedoch um ein Konfigurationswörterbuch handelt, wird es jedoch nicht neu bewertet, obwohl einige Parameter Variablen und Änderungen aufgrund von Klicks usw. sind. Um dies zu lösen und teure Vorgänge wie das Löschen des DOM zu vermeiden, tun wir es so, wie ich es für die Dynatree -Entwickler denke, hat dies beabsichtigt (aber nicht so deutlich im Beispiel von Ajax/JSON dokumentiert):

  //The HTML:
      <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
      <label id="mylabel"></label>

  $("#checkbox").click(function() {
    $("#mylabel").text($(this).is(":checked"))
    $("#tree").dynatree("option", "initAjax", {
             url: "myurl/myphp.php",
             data: {
                myparameter: $("#checkbox").is(":checked").toString()
             }
     });

    $("#tree").dynatree("getTree").reload();
  });

Dieses Beispiel legt die Konfiguration auf dem fest #tree Jedes Mal, wenn die Schaltfläche klickt, lädt sie den Baum neu.

Answer 5

Wenn Sie den Dynatree neu laden möchten, entfernen Sie zuerst den Knoten nach dem folgenden Code

$ ("#tree"). dynatree ("getroot"). removechildren ();

Answer 6

Anfangs habe ich die "Optionen" mit Initajax verwendet, um den Ajax -Anruf zu tätigen. Da ich jedoch eine Fehlermeldung anzeigen musste, die nach dem Nachladen eine leere Antwort vom Server gab, entschied ich mich, die übliche AJAX -Route zu begeben. Ich mache den Ajax -Anruf, bekomme die Antwort und lade dann den Baum neu. Also habe ich es in meiner JavaScript -Datei so gemacht

    var myObj = {getDynaTree :function(){

    //Refresh the dynatree
    $("#dynaTree").dynatree("option", "children", null);
    $.ajax({
        url: "myurl", 
        type: "POST", 
        dataType: "application/json", 
        headers:{'Accept' :'application/json',  'Content-Type':     'application/json' }, 
        data : JSON.stringify(myData),
        //handle the response
        complete : function(treeData)
            {

            $("#dynaTree").dynatree("option", "generateIds", true);      

            var parsedTreeData = JSON.parse(treeData.responseText);

            if(parsedTreeData.length ==0) {
                var parsedTreeData = [{title: "No documents found for the  search criteria, please revisit the criteria",
                    isFolder: false, tooltip: "No documents found for the search criteria, please revisit the criteria" }];

            } 
            $("#dynaTree").dynatree("option", "children", parsedTreeData);
            $("#dynaTree").dynatree("getTree").reload();

            }
        });

    }}

Aufruffunktion

    $("#myLink").click(function() {  myObj.getDynaTree(); }

Der Dynatree wurde in einer separaten JavaScript -Datei initialisiert

    //Initialization for the dyna tree. 
    var treeData = [{title: "Dynamic Tree Demo",isFolder: false, tooltip: "Here, is your Dynamic Tree!" }];

    jQuery(document).ready(function() {
    initReqActions(treeData);   
    });

    initReqActions= function(myTree){
     $("#dynaTree").dynatree({
        checkbox: false,            
        selectMode: 2,
         // create IDs for HTML elements that are generated
          generateIds: true, 
          cookie: {
              expires :-1  
          },    
        children: myTree,           
        onQuerySelect: function(select, node) {
            if( node.data.isFolder )
                return false;
        },

        onClick: function(node, event) {
            if( ! node.data.isFolder )
                node.toggleSelect();
        },
        onDblClick: function(node, event) {
            node.toggleExpand();
        },
        onKeydown: function(node, event) {
            if( event.which == 32 ) {
                node.toggleSelect();
                return false;
            }
        }


    });
}

Answer 7

n= "#tree";
$(n).dynatree({});
tree = $(n).dynatree("getTree");
root = tree.getRoot();
tree.enableUpdate(false);
root.removeChildren();
tree.enableUpdate(true);