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

时间:2015-08-17 11:51:36

标签: javascript jquery asp.net-mvc jstree

我在我的应用程序中使用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调用/延迟加载如何与搜索功能一起使用。

enter image description here

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

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

LINC00115设置更改为:

file 1

答案 2 :(得分:0)

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