jquery - 使用 Ajax/JSON 的 jsTree 搜索不调用 URL

Question

我非常感谢以下方面的帮助:

我有一个通过 URL 加载 JSON 数据的 jsTree。所有数据均已预加载。

我需要做的是更改搜索功能，根据用户输入通过 AJAX 使用新的 JSON 数据重新加载整个树(因为我需要在后端进行更复杂的节点搜索)。

首先，我要做的就是获取 jsTree 代码来调用我的 URL。我从最初加载树时使用的 URL 开始。

然而 - 这是我找不到解决方案的问题 - 尽管成功调用 URL 来首次加载树，但当我输入一些搜索文本并单击“搜索”时，jsTree 使用其正常的内部搜索来突出显示节点，但我提供的 URL 再也不会被调用。

HTML 是

<div>
    <form>
        <div>
             <input id="treeSearchText" type="text" />
             <button id="searchTree" class="btn">Search</button>
             <button id="clearSearch" class="btn">Clear</button>
        </div>
    </form>
</div>

<div id="myJsTree" style="height: 100%;"></div>

我使用的 jsTree 初始化是:

var url = <my_url>;

$("#myJsTree").jstree({
    "json_data" : {
        async : true,
        "ajax" : {
            "url" : url
        }
     },
    "search": {
        "case_insensitive" : true,
        "ajax" : {
            "url" : url       
        }
    },
    'ui' : {
        'select_limit' : 1,
        'initially_selected' : [${myId}],
    },
    "plugins" : [ "json_data", "search", "sort", "ui", "themeroller" ],
});

以及搜索代码片段:

$("#searchTree").click(function() {
    $("#myJsTree").jstree("search", $("#treeSearchText").val());
    return false;
});

我非常感谢任何帮助。

谢谢。

Answer 1

最后有解决办法吗？

我现在正在做同样的事情 - search 插件选项的 ajax 部分的行为就像 jQuery ajax 选项，对我来说，我指定了 类型:“POST”，一个success函数和dataType:“JSON”，我的成功函数正在我的控制台中记录结果。

From the manual (不是世界上最好的手册)，对于每个匹配的搜索结果，您需要指定它的路径，而不包括匹配的节点ID。然后 jsTree 将加载您给它的路径，并且内置的突出显示将与文本匹配。例如。如果您的搜索匹配的条目位于 #secondchild 节点(向下 3 级)中，则您需要将其传递给 jsTree，以便它在您的搜索中加载该结果:

Array[ '#rootnode', '#firstchild', '#secondchild' ]

这将使用您已经指定的标准数据检索方法加载这三个节点(如果它们尚不存在于 DOM 中)。通过对您要查找的路径进行硬编码，对 JSON 结果进行一些测试，看看它是如何工作的。

注意:如果您在 Ajax 请求中定义了 success 方法，则需要返回在方法中获得的数据对象，这将允许 jsTree 解析它并执行其操作事物。就我而言，我有 console.log(data) 但它什么也没做，因为我之后没有返回数据。

EDIT

我解决了我的问题，而不是返回包含每个匹配元素的路径的多个数组，您需要返回一个包含唯一节点ID的单级数组，并且搜索插件按预期解析它并在执行客户端搜索之前加载新的。

请参阅此处了解我的解释:https://stackoverflow.com/a/20316921/2812842