通過Ajax調用將數據從MVC控制器傳遞到jsTree。

Question

我有一個帶有父節點和5個子節點的jsTree。 他們運作良好。 我正在嘗試實現一個動態的jsTree，在其中單擊一個節點，一個ajax調用應將該節點的ID傳遞給我的Java MVC spring-boot控制器，並將一個鍵作為子節點的ID並將值作為子節點的名稱傳遞給Map。

到目前為止，我設法獲得了被單擊的子節點ID的值，並通過ajax調用將其傳遞給我的java控制器。 但是由於無法確定如何構造從控制器傳遞到ajax調用的數據，而后者又必須實現jsTree，因此我無法繼續。 這是我現有的jsTree的代碼-

<div id="container">
 <ul>
   <li id = "id1">Root
      <ul>
        <li id="id 1-1">child 1</li>
        <li id="id 1-2">child 2</li>
        <li id="id 1-3">child 3</li>
        <li id="id 1-4">child 4</li>
        <li id="id 1-5">child 5</li>       
      </ul>
   </li>
 </ul>
</div>

這是我的ajax -jquery調用的代碼，該代碼將nodeID傳遞給控制器​​-

$(function() {
  $('#container').on('changed.jstree', function (e, data) {
    var i, j, r = [], rid = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
      rid.push(data.instance.get_node(data.selected[i]).id);
    }
    console.clear();
    console.log('Selected: ' + r.join(', '));
    console.log('Selected id: ' + rid.join(', '));
    $.ajax({
        type: 'GET',
        url: "http://localhost:8080/tree/object?nodeID="+rid.join(', '),
        contentType: 'text/plain',
        crossDomain: false,
        async:true,
        success:function() {

            }   
    });
  })
  .jstree();
});

我對jsTree，ajax和jquery的了解受到限制。 任何幫助，將不勝感激。 我正在研究jsTree的文檔：通過此處的 ajax調用填充樹。

Answer 1

您不想進行自己的AJAX調用-您可以按以下方式設置要使用的URL： https ://www.jstree.com/api/#/ ? f = $ .jstree.defaults.core.data和JSTree將為您執行Ajax調用。

將url屬性設置為您的url，並將數據設置為返回節點ID的函數；

'url' : 'ajax_nodes.html',
'data' : function (node) {
    return { 'id' : node.id };
}

如果從Ajax調用返回數據-您可能應該以JSON而不是HTML形式返回數據。

因此，此頁面是您應查看的內容： https : //www.jstree.com/docs/json/

您所需要的最少是一個像這樣的JSON對象；

{
  id          : "string" // will be autogenerated if omitted
  text        : "string" 
  children    : false
}

如果子節點可以擴展並觸發自身的其他所有事件（作為傳遞其子節點的ID），則子節點應為true；如果它是葉節點，則子節點應為false。