dynatree - ¿Cómo desplazarse al nodo activo?

Question

Tengo dynatree con altura fija y barra de desplazamiento vertical.

node.activate(); selecciona el nodo que estoy buscando, pero no mueve la barra de desplazamiento vertical, por lo que tengo que desplazarme manualmente para ver el nodo activo.

¿Cómo lo desplazo programmaticlly?

---

Gracias a Mar10, que resuelven este problema:

var activeLi = node.li; 
$('#tree').animate({ 
    scrollTop: $(activeLi).offset().top - $('#tree').offset().top + $('#tree').scrollTop() 
}, 'slow'); 

Answer 1

Dynatree no tiene una funcionalidad integrada scrollTo. Pero debería poder utilizar uno de los métodos y complementos existentes, una vez que tenga el elemento DOM que desea hacer visible.

En su caso, ya que parecen tener un objeto node, para que pueda obtener la etiqueta asociada al <li> y <span> usando node.li o node.span.

En general se puede obtener el nodo activo en cualquier momento llamando

var node = $("#tree").dynatree("getActiveNode"); 
// or 
var node = $("#tree").dynatree("getTree").getActiveNode(); 

continuación, obtener el elemento DOM asociado:

var activeLI = node && node.li; 

o controlar el evento de activación:

onActivate: function(node) { 
    var activeLI = node.li; 
    ... 
} 

Una vez que tenga el elemento, use un método estándar:

Scroll to a div using jquery, jQuery scroll to element, How to scroll to an element in jQuery?, ...

Editar 2014-05 A partir de Fancytree 2.0 desplazamiento automático se añadió como una opción estándar.

Answer 2

Tuve un problema similar, y no he podido hacer que scrollTop funcione como se indica en el ejemplo anterior. Lo arreglé cambiando el selector de '#tree' a '.dynatree-contenedor':

 
$('.dynatree-container').animate({ // animate the scrolling to the node 
    scrollTop: $(activeLi).offset().top - $('.dynatree-container').offset().top + $('.dynatree-container').scrollTop() 
}, 'slow'); 

Esto debe conseguir que ir y salvar a unas pocas horas de frustrataion (

:

Por cierto, me estoy usando dynatree versión 1.22 y jquery 1.8.3 y jquery ui 1.9.2.

Answer 3

Hay un problema cuando se usa $ ('. dynatree-container') cuando tiene más de un árbol en la página, ya que esto intente y seleccione cada árbol con esta clase. Tengo muchos árboles, así que necesito seleccionar el árbol con una identificación particular ... pero encuentro, al igual que la persona anterior, que tratando de seleccionar el árbol por su id (e g '#tree') no funciona. Entonces, ¿qué será ...? haciendo algo como = $ ("# prevPageTree"). dynatree ("getTree"). offset tampoco funciona ...

Unos minutos más tarde: bien, descubrí cómo hacerlo. Spelunking en el depurador de Chrome muestra que la clase .dynatree-container está realmente asociada al elemento < ul> insertado por dynatree bajo el elemento #tree usado para inicializar la instancia de dynatree.Así que hay que hacer algo como

$("#tree ul").animate({ // animate the scrolling to the node 
    scrollTop: $(activeLi).offset().top - $('#tree ul').offset().top + $('#tree ul').scrollTop() 
}, 'slow'); 

Y si, como yo, usted no quiere que desplazarse el nodo derecho de la parte superior de la ventana, a continuación,

scrollTop: $(activeLi).offset().top - $('#prevPageTree ul').offset().top + $('#prevPageTree ul').scrollTop() - 150 

va bien, ponte el nodo 150 píxeles abajo