JS Các liên kết cây không hoạt động

Question

Tôi mới sử dụng Jquery và JS Tree nhưng học cách yêu thích nó. Tôi đã thiết lập lên một trình đơn cây bằng cách sử dụng php tạo xml (xem mã bên dưới). Nó hoạt động như được mong đợi với một ngoại lệ - Các liên kết không hoạt động.

Tôi biết có điều gì đó cơ bản mà tôi không hiểu. Ngắn hạn tôi chỉ cần muốn các liên kết hoạt động như các liên kết thông thường. Dài hạn tôi muốn họ kích hoạt cuộc gọi ajax sẽ tải lại một div cụ thể trên trang.

Có ai có thể chỉ cho tôi đúng hướng không? Cảm ơn nhiều về sự giúp đỡ!

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

Ví dụ xml (mục duy nhất):

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

Answer 1

Tôi nghĩ rằng bạn cần phải viết một cách rõ ràng handler nhấp chuột cho các liên kết nút cây. JsTree có sự kiện bấm cho chính nó và không để cho nó đi đến trang chuyển hướng.

tôi sẽ cố gắng đi theo con đường này:

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

Answer 2

Tôi biết điều này là cũ, nhưng tôi đến đây tìm kiếm một sửa chữa nhanh chóng. Lubor Bílek chủ yếu là chính xác, nhưng lưu ý rằng jsTree sẽ ràng buộc phụ huynh <li> của phần tử neo được nhấp.

tôi giải quyết điều này bằng cách thực hiện:

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

Bằng cách đó, sự kiện này sẽ liên kết với con <a> của <li> thay vì <li> bản thân, vì vậy mà bạn có thể có thuộc tính href trên neo của bạn thay vì các mục danh sách của bạn.

Answer 3

Tôi tìm một cách đơn giản.

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

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

Tôi thấy rằng jstree đã sử dụng lớp "jstree-anchor" cho danh sách li. Vì vậy, tôi có thể tìm thấy href liên kết từ đối tượng này, tôi có thể tạo liên kết này mà không có bất kỳ chức năng giới hạn nào.

Answer 4

tôi cố gắng mã này:

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

Nó nâng data.rslt lỗi không xác định, vì vậy tôi không thể có được href với nó!

đây là mã có sẵn của tôi:

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

là liên quan đến phiên bản của jstree? Phiên bản jstree của tôi: 3.0.0-bata10

Answer 5

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

Phiên bản jstree: "3.0.0" , jquery: cuối cùng

update: hoặc cách tốt nhất đối với tôi:

.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

tôi giải quyết ngay bây giờ vấn đề này với một chút brute force

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

thoải mái và dễ dàng .

Answer 7

Hãy thử cách này:

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

Nhờ jQuery event delegation, sự kiện này sẽ ủy quyền cho <a> elemets. nếu bạn không sử dụng ủy quyền sự kiện, nó sẽ chỉ kích hoạt lần đầu tiên khi bạn nhấp vào từng liên kết.

Answer 8

Thông thường, chúng tôi cần kiểm soát hành động của cả hai "Vùng chứa" và "Nút con" cùng nhau.

Vì vậy, chúng ta có thể làm thomething như:

$("#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" là một trong những chức năng jsTree để kiểm tra nếu một nút không có con.