come ricaricare / aggiornamento / reinit DynaTree?

Question

Quando faccio la seguente

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

Voglio dynatree di dimenticare i dati albero corrente e ricarica con nuovi dati dall'URL specificato, invece. Ma trovo non lo fa di default.

Grazie.

Answer 1

guarda il metodo tree.reload(), dovrebbe fare quello che sono dopo.

vedi la documentazione qui: http://wwwendt.de /tech/dynatree/doc/dynatree-doc.html#h8.2

come nella documentazione, l'albero è il disegno interno della struttura, e si ottiene richiamando il comando getTree: $("#node").dynatree("getTree")

Answer 2

tree.reload(); è per i dati caricati dinamicamente come in Ajax. Se si lavora con UL / liste Li e necessità di ricaricare il vostro albero, quello che dovete fare: $("#tree").dynatree("destroy"); prima il codice di creazione dynatree regolare. Il parametro distruggere non è documentato (vedi http://wwwendt.de/tech/dynatree /doc/dynatree-doc.html ).

Answer 3

Funzione l'inizializzazione:

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

InitTree();

Per i dati di ricarica, chiamata:

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

Answer 4

Questa domanda è un duplicato di Cercando di ricarica / dynatree aggiornamento con nuovi dati

La mia soluzione non richiede deviazioni come empty() e destroy() ecc Pensate a questo: Quando viene creata la Dynatree si specifica un dizionario di impostazioni è necessario utilizzare. Tuttavia, come si tratta di una configurazione di dizionario non sarà rivalutato, anche se alcuni parametri sono variabili e il cambiamento a causa di scatti ecc Quindi, per risolvere questo ed evitare costose operazioni come cancellare il DOM e ricreare lo facciamo nel modo penso che gli sviluppatori Dynatree ha questa intesa (ma non così chiaramente documentato nella esempio AJAX / JSON):

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

Questo esempio imposta la configurazione sul #tree ogni volta che viene cliccato il pulsante, quindi ricarica la struttura.

Answer 5

se si desidera ricaricare la Dynatree primi mezzi di rimuovere il nodo da lui sotto il codice

$ ( "# albero") dynatree ( "GetRoot") removeChildren ();..

Answer 6

Inizialmente, stavo usando le "opzioni" con initAjax per effettuare la chiamata AJAX. Tuttavia, dal momento che ho dovuto mostrare un messaggio di errore in caso ci fosse una risposta vuota dal server dopo la ricarica, ho deciso di andare il solito percorso ajax. Faccio la chiamata ajax, ottenere la risposta e quindi ricaricare l'albero. Così ho fatto come questo nel mio file javascript

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

            }
        });

    }}

funzione di chiamata

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

Il dynatree è stata inizializzata in un file JavaScript separato

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