Question

我在使用jstree填充div并使用来自单独json文件的数据时遇到了麻烦。

为了做到这一点，我尝试用 $。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的开头，只有一个带有“加载”文本的范围，所以我猜数据有加载的麻烦。这是它的样子：

result of code above

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

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（树）;在回调函数中。

因此：

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

使用$ .getJSON来填充jstree会在加载时卡住

3 个答案: