使用 Ajax 调用/延迟加载的 JSTree 搜索答案

【问题标题】：JSTree Search with Ajax Call / Lazy Loading使用 Ajax 调用/延迟加载的 JSTree 搜索
【发布时间】：2015-08-17 11:51:36
【问题描述】：

我在我的应用程序中使用 JSTree。

我无法使用 ajax 调用实现搜索功能。

我把我试过的东西放在这里。

$(document).ready(function () {
    $("#jstree_demo_div").jstree({
        "core": {
            "data": {
                "url": "Tree/Index",
                "data": function (node) {
                    return { "id": node.id };
                }
            }
        },
        "search": {
            "url": "Tree/Index",
            "data": function (node) {
                return { "id": node };
            }
        },
        "plugins": ["search"],
    });

    $('#searchTree').on('click', function (event) {
        $("#jstree_demo_div").jstree('search', '1');
    });
});

每当我按下按钮时，它都会触发事件，之后不会向服务器发起调用。

我想要的是对搜索进行 ajax 调用并根据搜索完全重新创建树视图。

我无法理解我该怎么做？

我已经检查了以下链接。

JSTree API Documentation

jsTree search with Ajax/JSON not calling URL

在上面的 stackoverflow 问题中，我无法理解什么是“json_data”以及为什么以及如何使用它？

https://www.jstree.com 中没有一个示例使用名为“json_data”的变量。

请通过示例帮助我了解 JSTree Ajax 调用/延迟加载如何与搜索功能一起使用。

这对我真的很有帮助。提前谢谢你。

【问题讨论】：

标签： javascript jquery asp.net-mvc jstree

【解决方案1】：

search.ajax.data 配置选项不能是函数 - 它应该是一个对象（就像普通的 jQuery AJAX 配置一样），jstree 只会向该对象添加一个 str 属性。至于 GET 或 POST - 使用任何你想要的 - 你需要指定为 search.ajax 的只是一个有效的 jQuery AJAX 配置。

【讨论】：

是的，我试过了，在搜索中重新创建 JSTree 怎么样？我的意思是我有一组节点，我想在执行搜索时显示和展开。

【解决方案2】：

将search 设置更改为：

"search": {
    "ajax": {
         "url": url,
            }
          },

【讨论】：

但它没有传递值。除此之外，为什么我需要编写“ajax”，因为在加载数据时我不需要编写。请求只是为了更多的理解。谢谢。
它将值传递为?str=1，只需在浏览器中检查它并查看发送到服务器的url。我不知道，只是通过调试我意识到它会检查ajax，如果没有找到它会在本地搜索。
是的。正如你所说，它检查“ajax”。我也是通过调试发现的。但我无法理解和解决它。谢谢。将尝试通过调试 JSTree.js 来了解更多。谢谢。

【解决方案3】：

您的搜索配置需要更正，要使用关键字进行搜索，您需要将关键字传递给您的 url，并且您应该使用 GET 方法来检索数据。试试这个

        // Configuring the search plugin
        "search" : {
            // As this has been a common question - async search
            // Same as above - the `ajax` config option is actually jQuery's AJAX object
            "ajax" : {
                "url" : "Tree/Search",
                // You get the search string as a parameter
                "data" : function (str) {
                    return { 
                        "operation" : "search", 
                        "q" : str 
                    }; 
                }
            }
        },

【讨论】：