jsTree异步数据加载？

Question

我在我的ASP.NET MVC项目中包含了jsTree 3.0.9，并希望延迟加载节点。

但无论我使用哪种版本的jsTree，我的加载功能（如下图所示）都不会返回正确的布局。

怎么做 - 代码来自这个网站：http://www.miketyka.com/2012/10/lazy-loading-with-jstree-and-ajax/？

以下是我的全部代码：

 function RedrawDirectories() {
        $('#DestinationTree').jstree({
            //'core': {
            //    "animation": 0,
            //    //"check_callback": true,
            //    "themes": { "stripes": true }
            //    //,
            //    //"expand_selected_onload": false
            //},

            "json_data":
                {
                    "ajax":
                            {
                            "url":
                                //"/Home/GetDestinationTreeData"
                                function (node) {
                                    if (node == -1) {
                                        return "/Home/GetDestinationTreeData?key=";
                                    }
                                    else {
                                        return "/Home/GetDestinationTreeData?key=" + node.data("key");
                                    }
                            },

                            "type": "GET",
                            "dataType": "json",
                            "contentType": "application/json charset=utf-8",
                            //"dataType": "json",
                            //"contentType": "application/json charset=utf-8",
                            "data": function (ops) {
                                // this is called when the AJAX request is successful. "ops"
                                // contains the returned data from the server, which in
                                // my case is a json object containing an array of objects.
                                data = []
                                // go through data and create an array of objects to be given
                                // to jsTree just like when you're creating a static jsTree.
                                for (var opnum in ops) {
                                    var op = ops[opnum]
                                    node = {
                                        "data": op.info,
                                        "metadata": op,
                                        // THIS LINE BELOW IS THE MAGIC KEY!!! This will force
                                        //  jsTree to consider the node
                                        // openable and thus issue a new AJAX call hen the
                                        // user clicks on the little "+" symbol or
                                        // whatever opens nodes in your theme
                                        "state": "closed"
                                    }
                                    data.push(node);
                                }
                                return data; // this will return the formed array
                                // "data" to jsTree which will turn
                                // it into a list of nodes and
                                // insert it into the tree.
                            }
                        }
                },

            "types": {
                "types": {
                    "folder":
                    {
                        "icon":
                        {
                            "image": "../../Content/images/Icons/Folder/folder_yellow_icon_16_x_16.png"
                        }
                    },

                    "file":
                    {
                        "icon":
                        {
                            "image": "../../Content/images/Icons/File/Files-Edit-file-icon.png"
                        }
                    },
                    "root":
                    {
                        "icon":
                        {
                            "image": "../../Content/images/Icons/Folder/tree_root_v2.png"
                        }
                    }
                }
            },

            "themes": {
                "theme": "default",
                "dots": false,
                "icons": true,
                "url": "/content/themes/default/style.css"
            },

            "contextmenu": {
                "items": function ($node) {

                    if ($node.attr('rel') == 'root') {
                        return {
                            Create:
                                {
                                    "label": "Create folder",
                                    "action": function (obj) { this.create(obj); }
                                },
                            "Upload":
                             {
                                 "label": "Upload files",
                                 "action": function (obj) {
                                     $("#directoryPath").val($node.attr("id"));
                                     $("#DestinationTree").trigger("changed.jstree");
                                 }
                             },

                            "History":
                                {
                                    "label": "Show history",
                                    "action": function (obj) {
                                        var divTag = $("<div></div>");
                                        var path = $("#directoryPath").val();

                                        $.ajax({
                                            async: false,
                                            type: 'GET',
                                            url: "/Home/ShowHistory",
                                            data:
                                                {
                                                    "path": path
                                                },
                                            contentType: 'application/html; charset=utf-8',
                                            dataType: 'html',
                                            success: function (result) {
                                                divTag.html(result)
                                                .dialog
                                                ({
                                                    modal: true,
                                                    title: "History record",
                                                    autoResize: true,
                                                    height: 'auto',
                                                    width: 'auto',
                                                    draggable: true,
                                                    resizable: true,
                                                    buttons: {
                                                        Close: function () {
                                                            $(this).dialog("close");
                                                        }
                                                    }
                                                })
                                                .dialog('open');
                                            }
                                        });
                                    }
                                }
                        };
                    };

                    if ($node.attr('rel') == 'folder') {
                        return {
                            Create:
                                {
                                    "label": "Create folder",
                                    "action": function (obj) { this.create(obj); }
                                },
                            "Upload":
                             {
                                 "label": "Upload files",
                                 "action": function (obj) {
                                     $("#directoryPath").val($node.attr("id"));
                                     $("#DestinationTree").trigger("changed.jstree");
                                 }
                             },

                            Delete:
                                {
                                    "label": "Delete",
                                    "action": function (obj) {
                                        this.remove(obj);
                                    }
                                },
                            "History":
                                {
                                    "label": "Show history",
                                    "action": function (obj) {
                                        var divTag = $("<div></div>");
                                        var path = $("#directoryPath").val();

                                        $.ajax({
                                            async: false,
                                            type: 'GET',
                                            url: "/Home/ShowHistory",
                                            data:
                                                {
                                                    "path": path
                                                },
                                            contentType: 'application/html; charset=utf-8',
                                            dataType: 'html',
                                            success: function (result) {
                                                divTag.html(result)
                                                .dialog
                                                ({
                                                    modal: true,
                                                    title: "History record",
                                                    autoResize: true,
                                                    height: 'auto',
                                                    width: 'auto',
                                                    draggable: true,
                                                    resizable: true,
                                                    buttons: {
                                                        Close: function () {
                                                            $(this).dialog("close");
                                                        }
                                                    }
                                                })
                                                .dialog('open');
                                            }
                                        });
                                    }
                                }
                        };
                    };

                    if ($node.attr('rel') == 'file') {
                        return {
                            Delete:
                                {
                                    "label": "Delete",
                                    "action": function (obj) {
                                        this.remove(obj);
                                    }
                                },
                            "History":
                                {
                                    "label": "Show history",
                                    "action": function (obj) {
                                        var divTag = $("<div></div>");
                                        var path = $("#directoryPath").val();

                                        $.ajax({
                                            async: false,
                                            type: 'GET',
                                            url: "/Home/ShowHistory",
                                            data:
                                                {
                                                    "path": path
                                                },
                                            contentType: 'application/html; charset=utf-8',
                                            dataType: 'html',
                                            success: function (result) {
                                                divTag.html(result)
                                                .dialog
                                                ({
                                                    modal: true,
                                                    title: "History record",
                                                    autoResize: true,
                                                    height: 'auto',
                                                    width: 'auto',
                                                    draggable: true,
                                                    resizable: true,
                                                    buttons: {
                                                        Close: function () {
                                                            $(this).dialog("close");
                                                        }
                                                    }
                                                })
                                                .dialog('open');
                                            }
                                        });
                                    }
                                }
                        };
                    }
                },
            },
            "ui": {
                "select_limit": 1
            },
            "plugins": ["themes", "types", "sort", "json_data", "contextmenu", "ui", "crrm", "wholerow", "state"]
            //"plugins": ["themes", "sort", "json_data", "dnd", "contextmenu", "ui", "crrm"]
        });