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函数刷新表，同时它有我的新数据。

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

JStree异步搜索

1 个答案: