cómo recargar/actualizar/reiniciar DynaTree?

Question

Cuando hago lo siguiente

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

Quiero dynatree olvidarse de datos de árbol actual y volver a cargar con los nuevos datos de la URL especificada en su lugar. Pero me parece que no lo hace por defecto.

Gracias.

Answer 1

mira el método tree.reload(), debe hacer lo que buscas.

ver los documentos aquí: http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h8.2

como en la documentación, el árbol es el dibujo interno del árbol, y se obtiene mediante una llamada al comando getTree: $("#node").dynatree("getTree")

Answer 2

función de la inicialización:

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

InitTree(); 

Para volver a cargar los datos, llame a:

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

Answer 3

tree.reload(); es para datos cargados dinámicamente como en Ajax. Si está trabajando con listas ul/li y necesita volver a cargar su árbol, tiene que hacer: $("#tree").dynatree("destroy");antes de su código de creación de dynatree normal. El parámetro destruir no está documentado (ver http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

Answer 4

Esta pregunta es un duplicado de Trying to reload/refresh dynatree with new data

Mi solución no requiere de desvíos como empty() y destroy() etc. Piense en esto: Cuando se crea el Dynatree especificar un diccionario de configuración que debe utilizar. Sin embargo, como este es un diccionario de configuración, no se volverá a evaluar aunque algunos parámetros sean variables y cambien debido a clics, etc. Para solucionar esto y evitar costosas operaciones como eliminar el DOM y volver a crearlo, lo hacemos de la manera que creo desarrolladores Dynatree ha previsto esto (pero no tan claramente documentado en el ejemplo 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(); 
    }); 

este ejemplo se establece la configuración en el #tree cada vez que se hace clic en el botón, a continuación, vuelve a cargar el árbol.

Answer 5

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

Answer 6

Inicialmente, estaba usando las "opciones" con initAjax para realizar la llamada Ajax. Sin embargo, como tuve que mostrar un mensaje de error en caso de que hubiera una respuesta vacía del servidor después de la recarga, decidí seguir la ruta habitual de Ajax. Hago la llamada ajax, obtengo la respuesta y luego vuelvo a cargar el árbol. así que lo hice como esto en mi archivo 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(); 

      } 
     }); 

    }} 

llamando a la función

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

El dynatree se ha inicializado en un separada archivo javascript

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

si desea volver a cargar el Dynatree Significa Primero Eliminar el nodo Por debajo del código

$ ("# tree"). dynatree ("getRoot"). removeChildren();