2010-08-27 15 views
21

Empecé a jugar con jQuery y el complemento jsTree ayer, y lo he cargado con éxito el árbol con una llamada AJAX a un servlet. Ahora, me gustaría que el árbol abra todos los nodos después de la carga, así que agregué una función de éxito al atributo ajax. Sin embargo, parece que no puedo hacer que el método open_all() funcione correctamente. Soy muy nuevo para trabajar con jQuery, así que supongo que es algo simple que estoy haciendo mal.¿Por qué jsTree open_all() no funciona para mí?

Firebug no muestra ningún error que descarte el error tonto del nombre del método mal escrito. Revisé la documentación y creo que estoy haciendo todo correctamente de acuerdo con lo que leo. El árbol se está cargando correctamente, pero no abre todos los nodos después de que se carga la página.

Estoy usando jQuery 1.4.2 y jsTree 1.0rc2 en Firefox 3.6.8.

Aquí está el código que estoy usando para cargar el árbol y tratará de abrir todos los nodos en el árbol:

// Create the tree object 
$("td#modelXML").jstree({ 
    core : { "animation" : 0 }, 
    //xml_data : {"data" : "" + xml, "xsl" : "nest"}, 
    xml_data : {"ajax" : 
        {"url" : "servlet/GetModelHierarchy", 
        "type" : "post", "data" : { modelId : "" + modelId} }, 
        "xsl" : "nest", 
        "success" : function(){ 
           $(this).open_all(-1); 
           } 
    }, 
    themes : {"theme" : "classic", "dots" : true, "icons" : true}, 
    types : { 
     "types" : { 
      "category" : { 
       "valid_children" : ["factor"] 
      }, 
      "factor" : { 
       "valid_children" : ["level"] 
      }, 
      "level" : { 
       "valid_children" : "none", 
       "icon" : { 
        "image" : "${request.contextPath}/jsTree/file.png" 
       } 
      } 
     } 
    }, 
    plugins : ["themes", "types", "xml_data"] 
}); 

Respuesta

38

Usted tiene que enganchar en los eventos, y luego llamar a open_all.

Para todos los nodos tienen abierta en la carga, utilice:

var tree = $("#id-or-selector-for-my-tree-element"); 
    tree.bind("loaded.jstree", function (event, data) { 
     tree.jstree("open_all"); 
    }); 

hacer lo anterior, antes de inicializar el árbol con .jstree({...}).

Si actualiza, entonces tener todos los nodos abiertos de nuevo, usted tiene que utilizar:

tree.bind("refresh.jstree", function (event, data) { 
     tree.jstree("open_all"); 
    }); 
20

Sí, esto es una cuestión de edad, pero sin respuesta aceptada y tener la única respuesta no estar útil para mí, aquí está mi respuesta, que ahora uso:

var tree = $("td#modelXML") 
    .bind("loaded.jstree", function (e, data) { 
     data.inst.open_all(-1); // -1 opens all nodes in the container 
    }) 
    .jstree({ /* your jsTree options as normal */ }); 

el punto clave aquí es que data.inst es su jsTree, y es el único refere ya que tendrá disponible porque tree no tendrá un valor hasta que finalice .jstree({. Como se llama a loaded.jstree dentro de la llamada .jstree({, el resultado aún no existirá. ¿Ver?

+3

+1 Este método funcionó para mí, la respuesta aceptada no. – RedFilter

+0

¿De todos modos para que esto funcione después de una actualización? El evento cargado no parece dispararse. ¿Hay algún otro evento que indique cuándo se cargaron los datos? – Jens

+0

para jstree v3 ahora necesita esto (estaba abriendo el nodo raíz solamente) '.on ('loaded.jstree', función (evento, datos) { data.instance.open_node ('0') })' – KeepCalmAndCarryOn

1

¡Pruebe esto!

$("td#modelXML").jstree("open_all","#nodeID"); 
+0

esto no funciona para mí por algunas razones – user367134

2

que era completamente incapaz de conseguir que funcione, ya sea con o tree.jstree('open_all')data.inst.open_all(-1) - al final he tenido que usar data.instance.open_all() - notar el cambio de inst de ejemplo, y open_all (-1) a solo open_all() - Ambos parecen ser necesarios con jQuery 1.11 y jstree 3.0.0. Mi bloque de código final se ve así:

$(document).ready(function() { 
    var tree = $('#jstree'); 
    tree.bind('loaded.jstree', function(event, data) { 
     data.instance.open_all(); 
    }); 
    tree.jstree({}); 
}); 
Cuestiones relacionadas