问题描述
我在 jstree 中创建了一个树的图表。 因为我有很多节点数据,所以我希望负载是惰性的。 怎么可能每次点击父项都会调用 MysqL 数据库并检索子项?
喜欢这个主意: How to only display a TreeView expand sign [+] if children exist
谢谢!
解决方法
$('#tree').jstree({
'core': {
'data': {
// This is the API URL for processing child nodes
'url': '/get/children/',// This method is used to to prepare query data
'data': function (node) {
// This will add a query `?id=node_id_value`
// Add your own query data as per the requirement of API endpoint for processing
return { 'id': node.id };
}
}
}
});
url
属性用于提及子节点要联系的 URL,以及在单击的树节点上运行以准备要与 URL 一起传递的查询数据的 data
函数。
以下是来自 JSTREE 的用于延迟加载的演示 API 端点
根节点
API endpoint: https://www.jstree.com/fiddle/?lazy&id=%23
[
{
"id": 1,"text": "Root node",// Children of root node
"children": [
{
"id": 2,"text": "Child node 1","children": true // Child node 1 still has to be loaded lazily
},{
"id": 3,"text": "Child node 2"
}
]
}
]
子节点 1
API endpoint: https://www.jstree.com/fiddle/?lazy&id=2
这将加载子节点详细信息,因为 id 2
是 Child node 1
注意事项:
- 没有
children
属性的节点被视为树分支中的最终节点。 -
children
节点的属性可以是立即呈现子节点的节点数组,也可以是用于延迟加载子节点的布尔值true
。 - 每个节点必须有一个
id
,每个节点都是唯一的,以便节点 ID 可以在 API 端点用于处理各个子节点。
添加了一个示例代码段,以通过事件 changed.jstree
$(function () {
$('#lazy').jstree({
'core': {
'data': {
"url": "//www.jstree.com/fiddle/?lazy","data": function (node) {
return { "id": node.id,"noCache": Date.now() };
}
}
}
});
$('#lazy').on('changed.jstree',function (e,data) {
if (data.selected.length) {
var selected = data.instance.get_node(data.selected[0]);
var hasChildren = !selected.state.loaded || selected.children.length > 0;
console.log(`Selected = ${selected.text},hasChildren = ${hasChildren}`);
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/jstree.min.js" integrity="sha512-bU6dl4fd2XN3Do3aWypPP2DcKywDyR3YlyszV+rOw9OpglrGyBs6TyTsbglf9umgE+sy+dKm1UHhi07Lv+Vtfg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.11/themes/default/style.min.css" integrity="sha512-P8BwDSUInKMA7I116Z1RFg/Dfk85uFdliEUYO7vQlwtxLVMNvZimfMAQsaf++9EhlAGOVX6yhDQAIY3/70jDUg==" crossorigin="anonymous" />
<div id="lazy" class="demo"></div>
希望这些信息有帮助。