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

Question

我在我的应用程序中使用 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 调用搜索并根据搜索完全重新创建树视图。

我不明白我该怎么做？

我已经检查了以下 link。

JSTree API Documentation

jsTree search with Ajax/JSON not calling URL

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

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

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

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

Answer 1

将 search 设置更改为：

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

Answer 2

您的搜索配置需要更正，要使用您需要将关键字传递给您的关键字进行搜索 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 
                    }; 
                }
            }
        },

Answer 3

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

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

JSTree Search with Ajax Call / Lazy Loading

javascript

jquery

asp.net-mvc

jstree