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"，一个{{ 1}} function和success我的成功函数是在我的控制台中记录结果。

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

#secondchild

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

注意：如果您在Ajax请求中定义了Array[ '#rootnode', '#firstchild', '#secondchild' ]方法，则需要返回方法中获得的数据对象，这将允许jsTree解析它并执行其操作。在我的情况下，我有success但它没有做任何事情，因为我之后没有返回数据。

修改

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

请点击此处查看我的解释：https://stackoverflow.com/a/20316921/2812842

使用Ajax / JSON进行jsTree搜索而不调用URL

1 个答案: