使用 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" ],
});

以及搜索码的sn-p：

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

非常感谢任何帮助。

谢谢。

Answer 1

你最终得到了解决方案吗？

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

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

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

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

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

编辑

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

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