如何使用 AJAX 生成 jstree？

如何解决如何使用 AJAX 生成 jstree？

我在使用来自服务器的数据生成 JsTree 时遇到问题。我尝试了不同的格式并附加现有的树，没有骰子。唯一发生的事情是 jstree div 被替换为

<div id="jstree" class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false"><ul class="jstree-container-ul jstree-children" role="group"></ul></div>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
  <div id="jstree">

  </div>

  <script>
  $(function() {
    $.ajax({
        async : true,type : "GET",url : "/treeTest2",dataType : "json",success : function(json) {
            // alert(JSON.stringify((json)));
            createJSTrees(json);
        },error : function(xhr,ajaxOptions,thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});    

function createJSTrees(jsonData) {
    $("#jstree").jstree({
        "json_data" : {
            "data" : jsonData
        },"plugins" : [ "themes","json_data","ui" ]
    }).bind("select_node.jstree",function (e,data) {  
    alert(e);
    });
}
</script>
</body>
</html>

这是警报(JSON.stringify((json)));返回

[
    {
        "a_attr": {
            "id": 1
        },"text": "lvl1","icon": "snipplet","metadata": null,"children": [
            {
                "a_attr": {
                    "id": 3
                },"text": "lvl2","children": [
                    {
                        "a_attr": {
                            "id": 5
                        },"text": "lvl3","children": []
                    }
                ]
            },{
                "a_attr": {
                    "id": 4
                },"children": []
            }
        ]
    },{
        "a_attr": {
            "id": 2
        },"children": []
    }
]

稍后需要的数据需要元数据标签。一切都将被整理成文件夹和片段。 id 标签将用于超链接。

解决方法

我认为 id="jstree" 与全局变量 jstree 冲突。

确实，如果你给一个元素一个 ID，这个元素在 JS 中是直接可用的，不需要做任何事情：

myGreatDiv.innerHTML = "It works"

<div id="myGreatDiv"></div>

因此，您包含了定义 window.jstree 的 JsTree 库。然后，您使用 id="jstree" 创建一个 div，它会自动覆盖 window.jstree。

解决方案（我猜）：将您的 div 称为其他名称，例如

<div id="jstree_div">

这是解决方案。

function createJSTrees(jsonData) {
    $("#kautkas").jstree({  
        'core' : {  
            'data' : jsonData  
        }   
    });  
}

如何使用 AJAX 生成 jstree？

如何解决如何使用 AJAX 生成 jstree？

解决方法

相关推荐