延迟加载 JSTREE

Posted 2023-05-09

【中文标题】延迟加载 JSTREE

【英文标题】：Lazy loading JSTREE

【发布时间】：2021-07-13 07:51:20

【问题描述】：

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

喜欢这个想法： How to only display a TreeView expand sign [+] if children exist

谢谢！

【问题讨论】：

这个jstree demo有什么帮助吗？

不，谢谢，但在他们的示例中，有一个文件包含所有数据，并从中进行延迟上传。我希望每次点击父母都能检索 SQL 查询。非常感谢帮助！

它实际上是在进行 ajax 调用来检索该文件。在您的实现中，您应该替换该 ajax 的逻辑以根据来自 SQL 的数据获取详细信息。查询包含?id=demo_root_1被点击节点的id。

是的，但是我在哪里添加查询？无法在“DATA”中执行异步读取。

您需要在您的 ajax API 中创建一个端点来处理查询并以 jstree 所需的格式返回子数据

【参考方案1】：

$('#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，data 函数在单击的树节点上运行以准备查询数据以与 URL 一起传递。

以下是来自 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 端点用于处理各个子节点。

添加了一个示例 sn-p 以通过事件 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>

希望这些信息对您有所帮助。

【讨论】：

好的，非常感谢！！你帮了我很多！我正在尝试...

嗨，我如何知道节点是父节点还是子节点？我设置了一个名为 children 的变量，包含 true 或 false 但 JSTREE 没有引用它。

children: true 这对 jstree 表示，当前节点还有子节点需要通过延迟加载来加载。当你点击这个节点时，会有一个带有节点 ID 的 API 端点的 ajax 请求。

我已经更新了答案来稍微详细解释一下JSTREE节点格式，还添加了一个代码sn-p来识别所选节点是否有子节点。希望这些信息对您有所帮助。

非常感谢它对我有用！我无话可说！！！