如何使用新的 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 层子级，想一个场景：

示例场景：

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

公司2 -站点3 --代理5 -站点4 --代理6 --代理7

代码：

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

$('#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

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