通过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。