如何使用AJAX生成一个jstree？

Question

我在使用来自我的服务器的数据生成 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))); returns

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

稍后需要的数据需要元数据标记。一切都将被组织到文件夹和片段中。 id标签将用于超链接。

Answer 1

我认为 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">

Answer 2

这是解决方案。

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

如何使用AJAX生成一个jstree？

How to generate a jstree using AJAX?

javascript

jquery

ajax

jstree