javascript - 使用 $.getJSON 填充 jstree 在加载时卡住了

Question

我在使用 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 的开头，并且只有一个跨度，其中包含“加载”文本，所以我猜测数据加载有问题。这是它的样子：

我究竟做错了什么？有任何想法吗？感谢您的时间。

Answer 1

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

Answer 2

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

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

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

Answer 3

问题是

 console.log(tree);

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

像这样：

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