使用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

请问你最后有解决方案吗？

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

从手册（不是世界上最好的手册）中，对于每个匹配的搜索结果，您需要指定路径而不包括匹配的节点 ID。jsTree 然后将加载您给它的路径，并且内置的突出显示将匹配文本。例如，如果您的搜索匹配的条目在#secondchild节点中（向下 3 级），这就是您需要传递给 jsTree 以在您的搜索中加载该结果的内容：

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

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

注意：如果你success在你的 Ajax 请求中定义了一个方法，你需要返回你在你的方法中得到的数据对象，这将允许 jsTree 解析它并做它的事情。在我的情况下，我有console.log(data)但它什么也没做，因为我之后没有返回数据。

编辑

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

看这里我的解释：https : //stackoverflow.com/a/20316921/2812842