6

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

我有一个通过 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;
});

我真的很感激任何帮助。

谢谢。

4

1 回答 1

5

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

我现在正在做同样的事情 -插件选项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

于 2013-11-29T04:24:35.097 回答