如何使用 AJAX 生成 jstree？
Posted
技术标签:
【中文标题】如何使用 AJAX 生成 jstree？【英文标题】：How to generate a jstree using AJAX? 【发布时间】：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 彼此不理解。 【参考方案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">
【讨论】：
感谢您的回答，但已经尝试了不同的 id，但没有任何改变，我认为问题在于 jstree 无法识别和正确解析 JSON 数据。 啊，太糟糕了。不过换个ID也无妨。我愿意。【参考方案2】：这是解决方案。
function createJSTrees(jsonData)
$("#kautkas").jstree(
'core' :
'data' : jsonData
);
【讨论】：
以上是关于如何使用 AJAX 生成 jstree？的主要内容，如果未能解决你的问题，请参考以下文章
jsTree v 3+：如何在制作 jsTree 时使用 JSON 格式为“类型”插件传递 [类型] 信息？