如何使用 AJAX 生成 jstree？答案

【问题标题】：How to generate a jstree using AJAX?如何使用 AJAX 生成 jstree？
【发布时间】：2021-07-16 14:45:09
【问题描述】：

我在使用服务器中的数据生成 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",
                "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标签将用于超链接。

【问题讨论】：

如果我手动发布 JSON，一切正常；问题在于 ajax/jstree 彼此不理解。

标签： javascript jquery ajax jstree

【解决方案1】：

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

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

myGreatDiv.innerHTML = "It works"

&lt;div id="myGreatDiv"&gt;&lt;/div&gt;

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

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

<div id="jstree_div">

【讨论】：

感谢您的回答，但已经尝试了不同的 id，但没有任何改变，我认为问题在于 jstree 无法识别和正确解析 JSON 数据。
啊，太糟糕了。不过换个ID也无妨。我愿意。

【解决方案2】：

这是解决方案。

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

【讨论】：