javascript - JStree 异步搜索

Question

他们正忙于构建基于网络的应用程序。我们继承了之前开发人员使用 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>

Answer 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 函数刷新表。

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