JStree 异步搜索答案

【问题标题】：JStree Async SearchJStree 异步搜索
【发布时间】：2025-12-16 20:30:01
【问题描述】：

忙于构建基于 Web 的应用程序。而且我们继承了以前开发人员使用 jstree 的代码，所以现在整个站点由使用 jstree 的树组成。

即使在树上进行搜索也一切正常，但后来我们遇到了一个问题，即由于树太大，某些选项卡加载时间过长。

所以我们做了树异步/延迟加载，它运行良好，但知道问题是搜索效果不佳。

因为我们为搜索创建了一个 api，它可以工作，但在加载新树后它不会进行回调。

有人可以帮忙吗，因为我已经挣扎了 3 天了，这让我很头疼。

    // Tree Search
searchAjaxFunction: function () {

        var TreeCustomApiRequest = {
            nTreeCustomDesc: document.getElementById("tree_search").value,
            nUserId: document.getElementById("TrendUserID").value,
            nAccessLevel: document.getElementById("hfTrendAccessLevel").value
        }  
           $.ajax({
            type: "POST",
            data: JSON.stringify(TreeCustomApiRequest),
            url: 'api/TreeCustomSearch.aspx',
            success: function (jsonData)
            {
                Tree.dataJson = jsonData;

                // Clear the tree.
                //Tree.dataJson = jsonData;
                if ($("#tree").jstree()) {
                    $('#tree').jstree(true).settings.core.data = jsonData;
                    $('#tree').jstree(true).deselect_node(this);
                    $('#tree').jstree(true).toggle_node(this);
                    $('#tree').jstree(true).refresh();
                }
            },
            contentType: "application/json"
        }); 
},

onClickFunctionNode: function(node) {
    Tree.treeDivIdSelector.jstree(true).toggle_node(node);
},
pluginsArray: ["search", "checkbox", "types", "json_data","html_data"],
treeMenuContextItems: {},
Init: function(initData) {
    Tree.dataJson = initData.dataJson;
    Tree.treeDivIdSelector = initData.chartDivId;
    Tree.searchDivIdSelector = initData.searchDivId;
    var apiUriTree = 'api/TreeCustomChildren.aspx';
    Tree.treeDivIdSelector.jstree({
        "checkbox": {
            "keep_selected_style": true,
            "three_state": false
        },
        "plugins": Tree.pluginsArray,
        'core': {
            'data': function (node, cb) {
                // Fetch tree custom parent nodes
                if (node.id === "#") {
                    cb(Tree.dataJson);

                }
                else {
                    var _cb = cb;
                    //Fetch tree custom Child nodes


                    var TreeCustomApiRequest = {
                        nUserId: document.getElementById("TrendUserID").value,
                        nAccessLevel: document.getElementById("hfTrendAccessLevel").value,
                        nTreeCustomParentId: node.id
                    }
                    function recieveData(data) {
                        cb(data);
                    }

                    $.ajax({
                        type: "POST",
                        data: JSON.stringify(TreeCustomApiRequest),
                        url: apiUriTree,
                        success: recieveData,
                        contentType: "application/json"
                    });
                }
            },
            "themes": {
                "icons": false
            }
        },            


        "contextmenu": {
            items: Tree.pluginsArray.indexOf("contextmenu") > -1 ? Tree.treeMenuContextItems : null
        }

    });         

    var tree = Tree.treeDivIdSelector.jstree();
    function getNode(sNodeID) {
        return tree.get_node(sNodeID);
    }

    Tree.treeDivIdSelector.on('click', '.jstree-anchor', function(e) {
        Tree.onClickFunctionNode(this);
    }
    );
    //Tree.searchDivIdSelector.keyup(Tree.searchFunction);
},

接下来的代码在客户端……

  <script type="text/javascript">
    $(document).ready(function () {
        var dataJson = <%=sTreeViewJson%>
        Tree.Init({ dataJson: dataJson, chartDivId: $("#tree") });

        $("#btnSearch").click(function () {
            // Do the Ajax search
            Tree.searchAjaxFunction();
            //var value = document.getElementById("tree_search").value;
            //Tree.searchFunction();

    })
    });


</script>

【问题讨论】：

提前感谢您的帮助...
您能否向您的 AJAX 添加一个“完成：函数（jqXHR，状态）{...}”回调，以查看您从服务器获得的状态？因为你可能会得到一个错误，然后你的“成功”回调将不会被调用。
@NikolayErmakov 我将 jqXHR 和状态添加到我的 ajax 并带有警报（jqXHR.status）；在我运行树之后，我得到了 undefined。
我想做的是，一旦生成了新树，它应该能够再次使用 init 函数，但在搜索刷新后它永远不会进入。
我没有看到您在 AJAX 回调中调用 Init 函数的位置。

标签： javascript jquery ajax jstree jstree-search

【解决方案1】：

谢谢 Nikolay，这是我犯的一个愚蠢的错误，所以我在代码中添加的只是这个：

success: function (jsonData, callback )
            {
                //Goes back to the Callback with the new search data
                Tree.Init({ dataJson: jsonData, chartDivId: $("#tree"), searchDivId: $("#tree_search") });
                $('#tree').jstree(true).refresh();
            }

所以我删除了

                $('#tree').jstree(true).settings.core.data = jsonData;
                $('#tree').jstree(true).deselect_node(this);
                $('#tree').jstree(true).toggle_node(this);

知道它获取我的数据并在它有我的新数据时使用 init 函数刷新表。

希望这也可以帮助某人 = )。

【讨论】：