Populating một JSTree với dữ liệu JSON thu được trong AJAX

Question

Tôi đang cố gắng điền một JSTree với dữ liệu JSON mà tôi nhận được từ một dịch vụ (được gọi là sử dụng ajax). Tuy nhiên, tôi nhận được thông báo "Không có dữ liệu và cài đặt ajax được cung cấp lỗi" trong tệp jquery.jstree.js. Bởi vì điều này JSTree chỉ hiển thị một gif tải.

AJAX mã (ngồi biên tập để thử thiết json để kiểm tra biến địa phương, sau đó trở về thử nghiệm)

function getJSONData() { 
    var test; 
    $ 
      .ajax({ 
       async : true, 
       type : "GET", 
       url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2", 
       dataType : "json", 

       success : function(json) { 
        test = json; 
       }, 

       error : function(xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 
        test = "error"; 
       } 
      }); 
    return test; 
} 

đang JSTree

var jsonData = getJSONData(); 
createJSTrees(jsonData); 

function createJSTrees(jsonData) { 
     $("#supplierResults").jstree({ 
      "json_data" : { 
       "data" : jsonData 
      }, 
      "plugins" : [ "themes", "json_data", "ui" ] 
     }); 

Sau khi một số lỗi, tôi đã phát hiện ra rằng jsonData không được xác định khi được chuyển tới phương thức createJSTrees. Tôi có lấy đúng dữ liệu đó trong mã Ajax không? Cảm ơn trước

Answer 1

Tôi chưa thử nghiệm cách tiếp cận của bạn trước đây, nơi bạn cung cấp thông số dữ liệu trực tiếp cho plugin json_data, vì vậy tôi sẽ không thể cung cấp câu trả lời cho trường hợp này.

Tuy nhiên, vì bạn đang sử dụng cuộc gọi AJAX để nhận dữ liệu, bạn có thể cung cấp lời gọi AJAX cho JSTree và để cho nó tự xử lý cuộc gọi không? Dưới đây là cách tôi đã định cấu hình cuộc gọi AJAX trong mã của mình:

 (...) 
     'json_data': { 
      'ajax': { 
       'url': myURL, 
       'type': 'GET', 
       'data': function(node) { 
        return { 
         'nodeId': node.attr ? node.attr("id") : '' 
        }; 
       } 
      }, 
      'progressive_render': true, 
      'progressive_unload': false 
     }, 
     (...) 

Answer 2

jsonData không được xác định vì getJSONData() không trả về giá trị. Bạn không thể dựa vào giá trị trả về từ trình xử lý thành công $ .ajax của bạn trừ khi bạn gán một biến cục bộ cho getJSONData() được trả về sau khi cuộc gọi $ .ajax hoàn thành. Nhưng bạn muốn một cái gì đó như thế này, mà cũng có lợi ích là không đồng bộ:

<script type="text/javascript">  

$(function() { 
    $.ajax({ 
     async : true, 
     type : "GET", 
     url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2", 
     dataType : "json",  

     success : function(json) { 
      createJSTrees(json); 
     },  

     error : function(xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 
});  

function createJSTrees(jsonData) { 
    $("#supplierResults").jstree({ 
     "json_data" : { 
      "data" : jsonData 
     }, 
     "plugins" : [ "themes", "json_data", "ui" ] 
    }); 
}  

</script>