使用 $.getJSON 填充 jstree 在加载时卡住了答案

【问题标题】：using $.getJSON to populate jstree gets stuck at loading使用 $.getJSON 填充 jstree 在加载时卡住了
【发布时间】：2013-04-12 04:15:31
【问题描述】：

我在使用 jstree 填充来自单独 json 文件的数据的 div 时遇到问题。

为了做到这一点，我尝试使用 $.getJSON 获取 json（我不确定这是使用正确的函数）并将结果分配给我使用的变量接下来填充树，这就是我获取 json 文件的方式：

        var tree;
             tree=$.getJSON("tree_data.json",function(data){
                        tree=data;
             });
                    console.log(tree);

这是我用来填充 jstree div 的代码：

            $("#treeViewDiv").jstree({
                            "json_data" : tree,
                            "themes" : {
                                    "theme" : "apple",
                                    "dots" : true,
                                    "icons" : false
                            },
                            "plugins" : [
                                            "themes", "json_data", "ui"
                                        ]
                    }).bind("select_node.jstree", function(e, data)
                {
                    if(jQuery.data(data.rslt.obj[0], "href"))
                    {
                        window.location=jQuery.data(data.rslt.obj[0], "href");
                    }
                    else
                    {
                        alert("No href defined for this element");
                    }
                });

这是我的 tree_data.json 文件，其中包含我尝试使用以下内容填充树的数据：

    {
                    "data":[
                        {
                            "data" : "Search engines",
                            "children" :[
                                         {"data":{"title":"Yahoo", "icon":"./themes/file.png"},  "metadata":{"href":"http://www.yahoo.com"}},
                                         {"data":"Bing", "metadata":{"href":"http://www.bing.com"}},
                                         {"data":"Google", "children":[{"data":"Youtube", "metadata":{"href":"http://youtube.com"}},{"data":"Gmail", "metadata":{"href":"http://www.gmail.com"}},{"data":"Orkut","metadata":{"href":"http://www.orkut.com"}}], "metadata" : {"href":"http://youtube.com"}}
                                        ],
                            "state" : "open"
                        },
                        {
                            "data" : "Networking sites",
                            "children" :[
                                {"data":"Facebook", "metadata":{"href":"http://www.fb.com"}},
                                {"data":"Twitter", "metadata":{"href":"http://twitter.com"}}
                            ]
                        }
                    ]
 }

由于我的代码，我有一个 jstree 的开头，并且只有一个跨度包含“正在加载”文本，所以我猜测数据加载有问题。这是它的样子：

我做错了什么？有任何想法吗？谢谢你的时间。

【问题讨论】：

标签： javascript jquery json jstree populate

【解决方案1】：

将整个$("#treeViewDiv").jstree({... 块放在$.getJSON 回调中

【讨论】：

【解决方案2】：

$.getJSON 不返回数据；数据在回调中：

var tree;
$.getJSON("tree_data.json", function(data){
    tree = data;
    console.log(tree);
});

尝试调用您的插件来代替上述console.log。

【讨论】：

我不明白“数据在回调中”是什么意思。看来树的定义是正确的。请检查我刚刚添加的结果的图像。
回调是第二个参数。 $.getJSON 将 url ("tree_data.json") 加载到 data。此数据在回调中分配给tree，而不是作为返回值。

【解决方案3】：

问题是

 console.log(tree);

在回调之前执行。放置 console.log(tree);在回调函数中。

这样：

      var tree;
      tree=$.getJSON("tree_data.json",function(data){
                tree=data;
                console.log(tree);
         });

【讨论】：