jsTree lazy search

jsTree lazy search

本文关键字：search lazy jsTree      更新时间：2023-09-26

是否可以使用 JsTree 进行"惰性搜索"，其中搜索结果可以是包含当前不在树中的节点的路径？我有一棵大树，我正在懒惰地加载节点，并希望能够处理包含当前未加载的节点的搜索。

到目前为止，唯一对我有用的是使用搜索回调并替换树中的所有数据并刷新。我想知道是否有一种不那么笨拙的方法来实现这一点。

旧文档似乎暗示了这一点：

"这个对象可以用来向每个服务器上的服务器发出请求。 搜索 - 如果使用异步树，则很有用。这样你就可以返回 在实际 DOM 搜索之前需要加载的 ID 数组 执行（以便与搜索匹配的所有节点都是 已加载）。例如，如果用户搜索"字符串"，你会得到 在服务器端，检查数据库并发现有一个 包含该字符串的节点。但是节点是其他节点的子节点 节点等 - 所以在你的响应中，你必须返回节点的路径 （不含节点本身）作为 ID：["#root_node"，"#child_node_3"]。这 意味着 jstree 将在执行客户端之前加载这两个节点 侧搜索，确保您的节点可见。

我尝试使用以下代码对此进行测试。搜索确实触发了 url 调用，但 jsTree 似乎没有使用响应，或者如果我返回的节点不存在，则抛出错误。我也没有看到对服务器的另一个查询，树中尚不存在的节点可能需要该查询：

<html>
<body>
<div id="jstree">tree goes here</div>
<input type="button" class="button" value="Search" id="search" style="">
</body>
<link rel="stylesheet" href="static/dist/themes/default/style.min.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="static/dist/jstree.js"></script>
<script type="text/javascript">
    $("#search").click(function () {
        console.log("search");
        $("#jstree").jstree("search", "test");
    });
    $('#jstree').jstree({
        core: {
            data: {
                dataType: "json",
                url: function (node) {
                    console.log(node.id);
                    return node.id === "#" ? "http://127.0.0.1:5000/" : "http://127.0.0.1:5000/";
                }
            }
        },
        search: {
            case_insensitive: true,
            ajax: {
                url: "http://127.0.0.1:5000/",
                "data": function (n) {
                    return { id: n.attr ? n.attr("id") : 0 };
                }
            }
        },
        plugins: ["json_data", "search"]
    })
    ;

</script>
</html>

jsTree 异步搜索的解决方案 - 触发器加载新节点似乎对我不起作用。 jsTree 似乎没有对服务器的响应做任何事情。

我可能很晚才回答这个问题，但这里有一个类似的问题：
jsTree AJAX 搜索与一些节点子级？

接受的答案包含发送到服务器的详细信息以及响应应该是什么（唯一父 ID 数组）。

确保从search.ajax.data中删除函数 - 此属性不能是函数 - 它是一个标准的jQuery AJAX配置（所以它应该是一个对象，jstree将向其添加一个str属性）。

顺便说一句，由于相同的源策略，请确保您实际上可以向127.0.0.1:5000发送请求 - 也许您需要添加 CORS 标头。

如果这没有帮助，请提供服务器响应（标头和正文）。

相关文章：