JsTree Mở một nút rồi chọn nút con (sử dụng json_result)

Question

Tôi gặp sự cố với JsTree mà tôi đang sử dụng trong dự án MVC2. Tôi muốn tạo ra một chức năng để bỏ chọn/đóng tất cả các nút trên cây. Sau đó mở một nút cụ thể và chọn một nút con cụ thể (Tôi có các giá trị Id cho cả hai).

Vấn đề là select_node luôn được gọi trước khi open_node kết thúc, do đó nút không được chọn vì cây chưa tải dữ liệu và ID nút không tồn tại.

Lần đầu tiên tôi thử chức năng này.

$('#demo3').jstree('deselect_all'); 
$('#demo3').jstree('close_all'); 
$('#demo3').jstree("open_node", $('#ParentId'), false, true); 
$('#demo3').jstree("select_node", $('#ChildId')); 

Sau đó, tôi đã thử di chuyển mã tới liên kết select_node và move_node của cây, nhưng không may mắn. Tại thời điểm này tôi đang mắc kẹt bằng cách sử dụng một setTimeout(), đó là một giải pháp khủng khiếp.

Có ai biết cách tôi có thể bảo cây chỉ chọn nút sau khi mở xong không?

Answer 1

Bạn có thể thử đi qua một chức năng đó chọn nút như một callback như:

$('#demo3').jstree('open_node', '#ParentID', function(e, data) { 
    $('#demo3').jstree('select_node', '#ChildId'); 
}, true); 

Bằng cách này select_node sẽ được gọi khi open_node trả về thành công.

Answer 2

Tôi hiện đang sử dụng nó trong dự án MVC4.

nếu bạn định cấu hình hàm open_node để tải nút JSON (trong plugin "cốt lõi" bạn đặt load_open thành true), thì nút mới được thêm vào tồn tại ở phía máy chủ nhưng phần tử DOM của nó vẫn không phải vì open_node chức năng không hoàn thành công việc. Do đó, bạn cần đợi hoặc sử dụng tham số thứ hai (gọi lại thành công). Trong hàm gọi lại, nút mới được hiển thị trong cây DOM và bộ chọn của nó hợp lệ. mẫu cấu hình

jsTree:

"core": { 
    "open_parents": true, 
    "load_open": true 
} 

mã làm việc của tôi:

$("iframe#UploadTarget").load(function() { 
    var result = jQuery.parseJSON($(this).contents().text()); 
    if (result.Result == true) { 
    $("#uploadDialog").dialog("close"); 
    var tree = jQuery.jstree._focused(); 

    /* 
     open_node will open the parent, get the childs from the server 
     (controller) and renders the new item before the callback executed, 
     so the jQuery selector will be valid 
    */ 

    tree.open_node(result.ParentId,/*CALLBACK*/ function() { 
      var newNode = $("#" + result.Id); 
      tree.select_node(newNode, false, null); 
    }); 

    } else { 
     alert(result.Result + ":" + result.ResultDescription); 
    } 

});//GOOD LUCK :-) 

Answer 3

hy vọng điều này có thể giúp đỡ và xin lỗi tôi không sử dụng json. Tôi đang sử dụng jstree cùng với chức năng để mở các nút bằng cách nhấp vào các yếu tố bên ngoài từ html của jstree.

mỗi nút trong thiết lập của chúng tôi giống như trang web, vì vậy trên trang chủ của trang tổng quan, chúng tôi có danh sách các trang được chỉnh sửa gần đây.

mỗi các liên kết này có javascript này để thực thi

<a href="javascript: selectLeftNavNode(339);">Edit</a> 

nơi 339 là id của trang chúng tôi muốn chỉnh sửa

và đây là chức năng fhe đã từng được thực hiện

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     $('#demo').jstree('select_node', '#node_' + node); 
} 

vấn đề chúng tôi nhận thấy gần đây rằng nếu trang được chỉnh sửa gần đây nằm sâu bên trong cây cụ thể hơn trong phần chưa được tải, nó sẽ bị lỗi

đây là lý do tại sao tôi quyết định thực hiện yêu cầu ajax đến máy chủ để lấy tất cả các mẹ id của

thay đổi mã dưới đây, ajax trong trường hợp của tôi sẽ trở lại một cái gì đó giống như xml tìm kiếm này

<?xml version="1.0" encoding="UTF-8"?> 
<response> 
<paths> 
<path>339</path> 
<path>338</path> 
<path>38</path> 
</paths> 
</response> 

và chức năng

function selectLeftNavNode(node) { 
     $('#demo').jstree('deselect_all'); 
     if($('#demo').jstree('select_node', '#node_' + node) === false) 
     { 
      // if it is false means that the node is not yet rendered 
      // so instead of loading we will require to get list of parent nodes to open in order, then it will become available 
      // an ajax call should get us all the nodes 
      $.ajax({ 
       type: "POST", 
       dataType: "xml", 
       url: your_url_to_php_script', 
       data: {node_id:node}, 
       success: function(data) 
       { 
        var remaining_nodes = new Array(); 
        var paths_count = $(data).find('response').find('path').length; 
        for(var x=1;x<=paths_count;x++){ 
         remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text(); 
        } 

        open_nodes_step_by_step(remaining_nodes); 
       } 
      }); 
     } 
    } 

và thêm vào đó một chức năng được looped qua callbacks từ open_node, chức năng mở nút bằng nút và khi nó chạm t ông mục cuối cùng mà nên là id nút thực tế chúng ta muốn chọn nó sẽ sử dụng select_node thay

function open_nodes_step_by_step(remaining_nodes) 
{ 
    var nodes = remaining_nodes.slice(); 
    tree = jQuery.jstree._focused(); 
    if(nodes.length > 1){ 
     var nodes_left = remaining_nodes.slice(); 
     nodes_left.pop(); 
     var to_open = nodes.length - 1; 
     tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function() { 
      open_nodes_step_by_step(nodes_left); 
     }); 
    } 
    else{ 
     tree.select_node('#node_' + nodes[0]); 
    } 
} 

tôi đã thử nghiệm giải pháp của tôi với IE8, FF và Chrome tất cả dường như chỉ làm việc tốt, trên đầu trang của tôi mà sử dụng jQuery v1.10.1 và jsTree 1.0-rc1 (không may là mã đã có trong nhiều năm nay và nó có tất cả cơ sở dữ liệu đó và các tích hợp khác tôi quyết định không thay đổi sang phiên bản mới hơn, nó hoạt động)

hy vọng tôi đã giúp ai đó

Tom