如何使用新的 jstree v3.0.0 按需加载孩子

Question

我正在寻找在 jstree 中按需（扩展）填充子节点的一点帮助。我可以填充父节点，但没有运气填充子节点。

场景：

我正在使用 jstree 来填充树中的节点。我的数据源是json。但是，我从不同的服务获取父节点，从不同的服务获取子节点。

我正在使用此处找到的新 jstree 3.0.0 版： https://github.com/vakata/jstree/zipball/3.0.0-beta8

我面临什么挑战？：

我想在用户展开父节点时按需加载子节点和子节点。可能有数百家公司、数千个站点和数百万个代理，因此不可能一次加载所有数据……（即，将结果公司、站点和代理组合在一起可以工作，但由于性能问题而不可取）。

在此处找到的代码示例：http://www.jstree.com/docs/json/ 非常隐含，我只能使用提供的示例填充父节点。也许遇到过类似解决方案的人可以帮助我找到合适的解决方案。

必填：

另外，我需要加载3层children，想一个场景：

示例场景：

公司1 -站点1 --代理1 --代理2 -站点2 --代理3 --Agent4

公司2 -Site3 --代理5 -Site4 --代理6 --Agent7

代码：

这是我的代码（仅适用于父节点）：

$('#agentsTreev2').jstree({
            "plugins": ["contextmenu", "dnd", "search", "sort", "state", "types", "unique", "wholerow"],
            'core': {
                'data': {

                    'url': function (node) {
                        console.log(node.id);
                        return node.id === '#' ?
                                        'http://localhost:21282/data.svc/Companies?$format=application/json;odata=nometadata;'
                            :
                                        'http://localhost:21282/data.svc/Sites?$select=Site_Id,Name,Company_Id&$filter=Company_Id eq 24&$format=application/json;odata=nometadata;';

//^^^^ 以上是子/站点的示例 url，实际 url 应使用父节点公司 ID

                    },
                    'crossDomain': 'true',
                    'type': 'GET',
                    'dataType': 'json',
                    'contentType': 'application/json',
                    'cache': false,
                    'success': function (response) {
                        return response;
                    },
                    'dataFilter': function (data, type) {

                        if (type == "json") {
                            //Replace Name to title so that dynatree can render Title text
                            data = data.replace(/Name/g, "title");
                            //Convert to Json object to allo addition of custom Object
                            var jsonObj = JSON.parse(data);
                            //Hack for WCF Service like in all the functions above.
                            jsonObj = jsonObj.value;

                            for (var i = 0; i < jsonObj.length; i++) {

                                //jstree specific values
                                jsonObj[i]["id"] = jsonObj[i]["Company_Id"];
                                jsonObj[i]["text"] = jsonObj[i]["title"];
                                jsonObj[i]["parent"] = '#';
                                jsonObj[i]["state"] = "closed";
                            }
                            data = JSON.stringify(jsonObj);
                        }

                        return data;
                    },
                    'error': function (node, XMLHttpRequest, textStatus, errorThrown) {
                        // Called on error, after error icon was created.
                        alert('Get Company error: ' + textStatus + ' detail: ' + errorThrown);
                        //return "-1";
                    }
                }
            }
        });

公司数据（父节点）：

{"value":[{"Company_Id":"31","Name":"E-Dev"},{"Company_Id":"35","Name":"ggggggggggggg"},{"Company_Id":"36","Name":"ggggggggggggg"},{"Company_Id":"37","Name":"ghhhhhhhhhhhhhhhhhhhhhhh"},{"Company_Id":"38","Name":"kjjkhkh jkhh kjh khkh hkhk"},{"Company_Id":"39","Name":"iiiiiiiiiiiiiiiiii"},{"Company_Id":"40","Name":"dsfhdskfjh"},{"Company_Id":"41","Name":"dfjshfkjds"},{"Company_Id":"42","Name":"dfjshfkjds"},{"Company_Id":"43","Name":"dfjshfkjds"},{"Company_Id":"44","Name":"dfjshfkjds"},{"Company_Id":"45","Name":"dfjshfkjds"},{"Company_Id":"46","Name":"dfjshfkjds"},{"Company_Id":"47","Name":"dfjshfkjds"},{"Company_Id":"48","Name":"dfjshfkjds"},{"Company_Id":"49","Name":"dfjshfkjds"},{"Company_Id":"50","Name":"dfjshfkjds"},{"Company_Id":"51","Name":"dfjshfkjds"},{"Company_Id":"52","Name":"dfjshfkjds"},{"Company_Id":"53","Name":"dfjshfkjds"},{"Company_Id":"54","Name":"dfjshfkjds"},{"Company_Id":"55","Name":"dzfdfskdfh"},{"Company_Id":"56","Name":"sdfhdsfh"},{"Company_Id":"57","Name":"jfhjdsfhsdhfj"},{"Company_Id":"58","Name":"fdhafksdfkjdsfhsdk"},{"Company_Id":"59","Name":"dfksdfhksdhfkskd"},{"Company_Id":"60","Name":"test"},{"Company_Id":"61","Name":"test"},{"Company_Id":"62","Name":"ErnestDev"},{"Company_Id":"63","Name":"EarnestDev"},{"Company_Id":"64","Name":"Earnestdev"},{"Company_Id":"65","Name":"hsdkfhksdhkfjh"}]}

网站（公司的子级）数据：

{"value":[{"Site_Id":"31","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"35","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"36","Company_Id":"24","Name":"Nottingham"}, {"Site_Id":"38","Company_Id":"24","Name":"Nottingham"}]}

代理（但此时不适用）

{"value":[{"Agent_Id":"61","Name":"","Site_Id":"40"},{"Agent_Id":"62","Name":"","Site_Id":"41"},{"Agent_Id":"63","Name":"","Site_Id":"42"},{"Agent_Id":"64","Name":"","Site_Id":"43"},{"Agent_Id":"65","Name":"","Site_Id":"44"},{"Agent_Id":"66","Name":"","Site_Id":"45"},{"Agent_Id":"67","Name":"","Site_Id":"46"},{"Agent_Id":"180","Name":"","Site_Id":"49"},{"Agent_Id":"181","Name":"","Site_Id":"49"},{"Agent_Id":"182","Name":"","Site_Id":"49"},{"Agent_Id":"183","Name":"","Site_Id":"49"},{"Agent_Id":"184","Name":"","Site_Id":"49"}]}

请注意，这只是示例数据，所查询的 wcf odata 服务已启用了 CORS。另请注意，我已成功填充父节点。

另外，请注意，这里发现的任何错字都只是为了保护关键数据而编辑此帖子的结果。

我只面临填充子节点和子节点的子节点的问题。

请帮忙。我有点卡住尝试各种 jstree 选项.. :(

编辑：

我得到的父节点：

Answer 1

尝试关注

$('#agentsTreev2').on('check_node.jstree', function (e, data) {
    data.instance.load_node(data.node);
});

如果配置正确会调用ajax

Answer 2

我为父（站点）节点启用了 延迟加载，并使用 initAjax 发送辅助 ajax 调用以延迟加载运行良好的子节点。