JS 트리 링크가 활성화되지 않았습니다.

Question

저는 Jquery와 JS Tree를 처음 사용했지만 그것을 배우는 것을 배웠습니다. 나는PHP를 사용하여 트리 메뉴를 최대 xml을 생성했습니다 (아래 코드 참조). 한 가지 예외가 있지만 으로 예상됩니다. - 링크가 활성화되어 있지 않습니다.

내가 이해할 수없는 기본적인 것이 있다는 것을 알고 있습니다. 단기간 나는 단지 정상 링크로 기능하는 링크를 원한다. 장기적으로 나는 그들에게 에 페이지의 특정 div를 다시로드하는 아약스 호출을 실행 시키길 원합니다.

누구나 올바른 방향으로 나를 가리킬 수 있습니까? 도움을 많이 주셔서 감사합니다!

$(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" ] 
     }); 
}); 

예 XML (단일 항목) :

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

Answer 1

난 당신이 명시 적으로 트리 노드 링크의 클릭 핸들러를 작성해야합니다 생각합니다. JsTree는 자체적으로 click 이벤트를 취하고 페이지를 리디렉션하도록하지 않습니다. 나는 이것이 오래 알고

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

Answer 2

,하지만 난 빠른 수정을 찾고 여기 온 :

나는이 길을 갈하려고합니다. Lubor Bílek은 대체로 정확하지만, jsTree는 클릭 된 앵커 요소의 부모 <li>을 바인딩합니다.

내가 수행하여이 문제를 해결 : 당신이 당신의 앵커에 href 속성을 대신 할 수 있도록

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

그 방법을, 이벤트는, 아이 대신 <li> 자체의 <li>의 <a>에 결합한다 귀하의 목록 항목.

Answer 3

나는 간단한 방법을 찾았습니다.

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

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

jstree가 li 목록에 "jstree-anchor"클래스를 사용하는 것으로 나타났습니다. 그래서이 객체에서 href 링크를 찾을 수 있습니다. 경계 함수없이이 링크를 만들 수 있습니다.

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

그것은 data.rslt 정의되지 않은 오류가 발생, 그래서 나는 그것으로 HREF를 얻을 수 없습니다

Answer 4

나는이 코드를 시도! jstree의 버전으로

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

를 관련이 : 여기

내 사용할 수 코드? 내 jstree 버전 : 3.0.0-bata10

Answer 5

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

jstree 버전 : "3.0.0 ", JQuery와 : 마지막

갱신 : 또는 나를 위해 가장 좋은 방법 : 나는 조금 무력

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

좋은 쉬운 지금이 문제를 해결

.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; 
}) 

Answer 6

.

Answer 7

시험해보십시오.

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

덕분에 jQuery event delegation 덕분에이 이벤트는 <a> 개의 elemets에 위임합니다. 이벤트 위임을 사용하지 않으면 각 앵커를 처음 클릭 할 때만 실행됩니다.

Answer 8

일반적으로 우리는 "컨테이너 노드"와 "자식 노드"의 동작을 함께 제어해야합니다.

$("#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"는 노드에 아이가없는 경우 확인 jsTree 기능 중 하나입니다

그래서 우리는 같은 thomething 할 수 있습니다.