Javascript 延迟加载JSTREE

我在jstree中创建了一个树的图表。 因为我有很多节点数据，所以我希望负载是惰性的。 怎么可能每次点击一个父节点时都会调用mysql数据库并检索子节点的数据库呢

像这样的想法：

谢谢大家!

$（“#树”）.jstree({
“核心”：{
“数据”：{
//这是用于处理子节点的API URL
“url”：“/get/children/”，
//此方法用于准备查询数据
“数据”：函数（节点）{
//这将添加一个查询`？id=node\u id\u值`
//根据API端点的要求添加自己的查询数据进行处理
返回{'id'：node.id}；
}
}
}
});

url

属性是指子节点要联系的url，以及在单击的树节点上运行的

data

函数，用于准备要与url一起传递的查询数据

下面是JSTREE中用于延迟加载的演示API端点

根节点

API端点：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端点：https://www.jstree.com/fiddle/?lazy&id=2

这将加载子节点详细信息，因为id

2

属于

子节点1

笔记：

• 没有

  子节点的节点

  属性被视为树分支中的最终节点
• 节点的

  children

  属性要么是用于立即渲染子节点的节点数组，要么是用于延迟加载子节点的布尔值

  true

• 每个节点都必须有一个

  id

  ，该id对于每个节点都是唯一的，以便节点id可以在API端点处用于处理各自的子节点

添加了一个示例代码段，以确定所选节点是否具有子节点，并使用event

changed.jstree

$（函数（）{
$（'#lazy'）.jstree({
“核心”：{
“数据”：{
“url”：“//www.jstree.com/fiddle/？lazy”，
“数据”：功能（节点）{
返回{“id”：node.id，“noCache”：Date.now（）}；
}
}
}
});
$（'#lazy'）.on（'changed.jstree'，函数（e，data）{
如果（数据。选定。长度）{
var selected=data.instance.get_节点（data.selected[0]）；
var haschilds=！selected.state.loaded | | selected.childrence.length>0；
log（`Selected=${Selected.text}，haschilds=${haschilds}`）；
}
})
});

这有什么帮助吗？不，谢谢，但在他们的示例中，有一个文件包含所有数据，并从中进行延迟上载。我希望每次单击父对象都能检索SQL查询。非常感谢您的帮助！它实际上是在执行一个ajax调用来检索该文件。在您的实现中，您应该替换ajax的逻辑，以基于SQL中的数据获取细节。查询包括被单击节点的id。是的，但是我在哪里添加查询？在“数据”中不可能执行异步读取。您需要在ajax API中创建一个端点，用于处理查询并以jstreeOk所需的格式返回子数据，非常感谢！！你帮了我很多！我正在尝试…嗨，我怎么知道节点是父节点还是子节点？我设置了一个名为children的变量，该变量包含true或false，但JSTREE没有引用它。
{children:true}
这意味着对JSTREE来说，当前节点仍然有要通过延迟加载加载的子节点。当你点击这个节点时，会有一个对API端点的ajax请求，请求的节点id为。我更新了答案，详细解释了JSTREE节点格式，还添加了一个代码片段，以确定所选节点是否有子节点。希望这些信息对我有帮助。非常感谢你，它对我有用！我没有话要说！！！