¿Cómo recargar/actualizar/reinit Dynatree?

Question

Cuando hago lo siguiente

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

Quiero que Dynatree se olvide de los datos actuales del árbol y vuelva a cargar con nuevos datos de la URL especificada. Pero encuentro que no lo hace de forma predeterminada.

Gracias.

Answer 1

Mira el tree.reload() Método, debe hacer lo que buscas.

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

Como en los documentos, el árbol es el dibujo interno del árbol, y lo obtienes llamando al comando gettree: $("#node").dynatree("getTree")

Answer 2

tree.reload(); es para datos cargados dinámicamente como en AJAX. Si está trabajando con listas UL/Li y necesita recargar su árbol, debe hacer:$("#tree").dynatree("destroy"); antes de Su código de creación de Dynatree regular. El parámetro Destroy no está documentado (ver http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html).

Answer 3

Funcionar la inicialización:

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

InitTree();

Para recargar los datos, llame a:

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

Answer 4

Esta pregunta es un duplicado de Intentando recargar/actualizar Dynatree con nuevos datos

Mi solución no requiere desvíos como empty() y destroy() etc. Piense en esto: cuando se crea el Dynatree, especifica un diccionario de configuración que debe usar. Sin embargo, como este es un diccionario de configuración, no se reevaluará a pesar de que algunos parámetros son variables y cambios debido a los clics, etc., por lo que para resolver esto y evitar operaciones costosas como eliminar el DOM y recrearlo, lo hacemos de la manera que creo que los desarrolladores de Dynatree tiene esto previsto (pero no tan claramente documentado en el ejemplo de 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 establece la configuración en el #tree Cada vez que se hace clic en el botón, recarga el árbol.

Answer 5

Si desea recargar el Dynatree significa primero eliminar el nodo por el siguiente código

$ ("#árbol"). Dynatree ("GetRoot"). RemoVeChildren ();

Answer 6

Inicialmente, estaba usando las "opciones" con Initajax para hacer la llamada Ajax. Sin embargo, dado que 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 AJAX habitual. Hago la llamada de Ajax, obtengo la respuesta y luego recarga el árbol. Así que lo hice así 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();

            }
        });

    }}

Función de llamadas

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

El Dynatree se inicializó en un archivo JavaScript separado

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