Nút jsTree Mở rộng/Thu gọn

Question

Tôi chạy vào plugin jQuery UI tuyệt vời trong sáng nay. Trong một từ - tuyệt vời! Nó rất dễ sử dụng, dễ làm theo kiểu & làm những gì nó nói trên hộp. Một điều tôi chưa thể tìm ra là điều này - trong ứng dụng của tôi, tôi muốn đảm bảo rằng chỉ có một nút được mở rộng tại bất kỳ thời điểm nào. tức là khi người dùng nhấp vào nút + và mở rộng một nút, bất kỳ nút nào được mở rộng trước đó sẽ bị thu gọn âm thầm. Tôi cần phải làm điều này một phần để ngăn chặn div container cho một cái nhìn khá dài cây từ việc tạo ra một thanh cuộn xấu xí trên tràn và cũng để tránh "quá tải lựa chọn" cho người dùng.

Tôi tưởng tượng rằng có một số cách để làm điều này nhưng tài liệu jstree tốt nhưng khá ngắn gọn đã không giúp tôi xác định đúng cách để làm điều này. Tôi sẽ đánh giá cao bất kỳ sự giúp đỡ nào.

Answer 1

jsTree tuyệt vời nhưng tài liệu của nó khá dày đặc. Tôi cuối cùng đã tìm ra nó vì vậy đây là giải pháp cho bất cứ ai chạy vào chủ đề này.

Thứ nhất, bạn cần ràng buộc sự kiện open_node với cây đang được đề cập đến. Nội dung nào đó dọc theo dòng

$("tree").jstree({"themes":objTheme,"plugins":arrPlugins,"core":objCore}). 
bind("open_node.jstree",function(event,data){closeOld(data)}); 

tức là bạn định cấu hình cá thể xem ảnh và sau đó ràng buộc sự kiện open_node. Ở đây tôi gọi hàm closeOld để thực hiện công việc mà tôi yêu cầu - đóng bất kỳ nút nào khác có thể đang mở. Hàm này giống như vậy

function closeOld(data) 
{ 
    var nn = data.rslt.obj; 
    var thisLvl = nn; 
    var levels = new Array(); 
    var iex = 0; 
    while (-1 != thisLvl) 
    { 
     levels.push(thisLvl); 
     thisLvl = data.inst._get_parent(thisLvl); 
     iex++; 
    } 

    if (0 < ignoreExp) 
    { 
     ignoreExp--; 
     return; 
    } 

    $("#divElements").jstree("close_all"); 
    ignoreExp = iex; 
    var len = levels.length - 1; 
    for (var i=len;i >=0;i--) $('#divElements').jstree('open_node',levels[i]); 
} 

Thao tác này sẽ xử lý chính xác gấp tất cả các nút khác bất kể mức lồng của nút vừa được mở rộng.

Một lời giải thích ngắn gọn về các bước liên quan

• Đầu tiên chúng ta bước sao lưu treeview cho đến khi chúng ta đạt đến một nút cấp cao nhất (-1 trong jstree nói) và đảm bảo rằng chúng tôi ghi lại mọi nút tổ tiên gặp phải trong quá trình trong mảng mức
• Tiếp theo chúng ta sụp đổ tất cả các nút trong treeview
• Bây giờ chúng ta lại mở rộng tất cả các nodees trong mức mảng. Trong khi làm như vậy, chúng tôi không muốn mã này thực hiện lại. Để ngăn chặn điều đó xảy ra, chúng tôi thiết lập toàn cầu ignoreEx biến với số lượng các nút trong mức
• Cuối cùng, chúng tôi bước qua các nút trong mức và mở rộng mỗi một trong số họ

Answer 2

Trên đây câu trả lời sẽ xây dựng cây một lần nữa và một lần nữa. Mã dưới đây sẽ mở nút và thu gọn đã được mở và nó không xây dựng lại cây.

.bind("open_node.jstree",function(event,data){ 
     closeOld(data); 
     }); 

và closeOld chức năng bao gồm:

function closeOld(data) 
{ 
    if($.inArray(data.node.id, myArray)==-1){ 
      myArray.push(data.node.id); 
      if(myArray.length!=1){ 
       var arr =data.node.id+","+data.node.parents; 
       var res = arr.split(","); 
       var parentArray = new Array(); 
       var len = myArray.length-1; 
       for (i = 0; i < res.length; i++) { 
        parentArray.push(res[i]); 
       } 
       for (var i=len;i >=0;i--){ 
        var index = $.inArray(myArray[i], parentArray); 
       if(index==-1){ 
        if(data.node.id!=myArray[i]){ 
        $('#jstree').jstree('close_node',myArray[i]); 
         delete myArray[i]; 
        } 
       } 
       } 
     } 
    } 

Answer 3

Tuy nhiên, một ví dụ cho jstree 3.3.2. Nó sử dụng underscore lib, vui lòng điều chỉnh giải pháp cho jquery hoặc vanillla js.

$(function() { 
    var tree = $('#tree'); 
    tree.on('before_open.jstree', function (e, data) { 
     var remained_ids = _.union(data.node.id, data.node.parents); 
     var $tree = $(this); 
     _.each(
       $tree 
        .jstree() 
        .get_json($tree, {flat: true}), 
       function (n) { 
        if (
         n.state.opened && 
         _.indexOf(remained_ids, n.id) == -1 
        ) { 
         grid.jstree('close_node', n.id); 
        } 
       } 
     ); 
    }); 
    tree.jstree(); 
}); 

Answer 4

Tôi đạt được điều đó chỉ bằng cách sử dụng sự kiện "before_open" và đóng tất cả các nút, cây của tôi chỉ có một cấp độ, không chắc chắn nếu đó là những gì bạn cần.

$('#dtree').on('before_open.jstree', function(e, data){ 
    $("#dtree").jstree("close_all"); 
});