JStree异步搜索

Question

Whe正在忙于构建一个基于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>

Answer 1

谢谢你，尼古拉，这是我犯的一个愚蠢的错误，所以我在我的代码中添加了以下内容：

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

希望这也能帮助到一些人= )。