2011-12-04 14 views
12

Soy nuevo en Jquery y JS Tree pero estoy aprendiendo a amarlo. Configuré en un menú de árbol usando php generated xml (ver código a continuación). Funciona como esperado con una excepción: los enlaces no están activos.JS Enlaces de árbol no activos

Sé que hay algo básico que no entiendo. A corto plazo, solo quiero que los enlaces funcionen como enlaces normales. A largo plazo, quiero que active una llamada ajax que volverá a cargar un div específico en la página.

¿Alguien puede indicarme la dirección correcta? ¡Gracias por la ayuda!

$(function() { 
     $("#mainMenu").jstree({ 
       xml_data : { data : <?php $menu->deliver(); ?> }, 
       core : { animation : 1000 } 
       ui : { select_limit : 1, selected_parent_close : false }, 
       themes : { theme : "default", dots : true, icons : false }, 
       types : { types : { "heading" : { select_node : true } } }, 
       plugins : [ "themes", "xml_data", "ui", "types" ] 
     }); 
}); 

Ejemplo XML (cada elemento):

"<root><item id='pubPages_home' parent_id='0'><content><name href='? 
a=pubPages&amp;f=home'>Public Home</name></content></item><root>" 
+0

¿Qué enlaces no funcionan? Si hace clic en el nombre del nodo? ¿Qué es lo que desea que suceda? ¿Podría proporcionar la muestra jsfiddle? – Radek

+1

@Radek Los nodos funcionan (abren y cierran el árbol) como se esperaba. Los hrefs de una etiqueta no funcionan. Al pasar el ratón sobre los enlaces, el navegador los reconoce, pero al hacer clic no se envía el navegador al enlace. Sospecho que JS Tree ha invocado preventDefault() para hacer clic en las etiquetas a. –

Respuesta

2

creo que tiene que escribir explícitamente el controlador de clic a los enlaces de nodos del árbol. JsTree toma el evento de clic por sí mismo y no lo dejes redirigir a la página.

me gustaría tratar de ir por este camino:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
}); 
3

Sé que esto es viejo, pero vine aquí en busca de una solución rápida. Lubor Bílek es en su mayoría correcto, pero tenga en cuenta que jsTree enlazará al padre <li> del elemento de anclaje cliqueado.

He resuelto esto haciendo:

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
}); 

De esta manera, el evento se unirá al niño <a> del <li> en lugar de la <li> sí mismo, para que pueda tener el atributo href en sus anclas en lugar de tus artículos de la lista.

0

Encuentro una manera simple.

$('#'+target).jstree({ 'core' : { 
    'data' : treeInfo 
} }); 

$(".jstree-anchor").click(function() 
{ 
    document.location.href = this; 
}); 

He encontrado que la jstree utiliza la clase "jstree-ancla" para las listas li. Entonces, puedo encontrar el enlace href desde este objeto, puedo hacer este enlace sin ninguna función de límite.

1

Trato este código:

window.location.href = data.rslt.obj.find('a').attr("href"); 

Se plantean data.rslt de error no definido, por lo que no puede conseguir href con él!

aquí es mi código disponibles:

$("#mytree").bind("select_node.jstree", function(e, data) { 
    window.location.href = data.node.a_attr.href; 
}); 

está relacionado con la versión de jstree? Mi versión jstree: 3.0.0-bata10

14
  .bind("select_node.jstree", function (e, data) { 
       var href = data.node.a_attr.href 
       document.location.href = href; 
      }) ; 

jstree version: "3.0.0" , jQuery: última

actualización: o la mejor manera para mí:

.bind("select_node.jstree", function (e, data) { 
    $('#jstree').jstree('save_state'); 
}) ; 

.on("activate_node.jstree", function(e,data){ 
    window.location.href = data.node.a_attr.href; 
}) 
1

He resuelto ahora este problema con un poco de fuerza bruta

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li> 

agradable y fácil

1

Pruebe esto:

jQuery("#mytree ul").on("click","li.jstree-node a",function(){ 
    document.location.href = this; 
}); 

Gracias a jQuery event delegation, este evento se delegará en <a> elemets. si no usa la delegación de eventos, se activará solo por primera vez que haga clic en cada ancla.

+0

¿Por qué debería el OP "probar esto"? ¿Puede proporcionar una explicación que beneficie al OP así como a los futuros visitantes de SO? –

1

Por lo general, necesitamos controlar la acción de ambos "Nodos de contenedor" y "Nodos secundarios" juntos.

Así podemos hacer thomething como:

$("#jstree-div").jstree().delegate("a","click", function(e) { 
      if ($("#jstree-div").jstree("is_leaf", this)) { 
       document.location.href = this; 
      } 
      else { 
       $("#jstree-div").jstree("toggle_node", this); 
      } 
     }); 

"is_leaf" es una de las funciones jsTree que comprueba si un nodo no tiene hijos.

Cuestiones relacionadas