Question

我一直在试验jQuery.jsTree库并需要一些帮助。有人可以告诉我如何从外部json_data文件中阅读.json。

$("#treeDemo").jstree({ 
    "plugins" : [ "themes", "json_data", "ui", "types" ],

    //"json_data": {
    //  "ajax" : {
    //      "url" : "Series.json"
    //  }
    //},

    "json_data" : {
        "data" : [{"data":"Series 1","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Season 2","children":[{"data":"Episode 4.avi","attr":{"rel":"file"}},{"data":"Episode 5.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Season 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}},{"data":"Episode 3.avi","attr":{"rel":"file"}},{"data":"Episode 4.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}],"attr":{"rel":"folder"}},{"data":"Series 3","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 1","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}},{"data":"Series 2","children":[{"data":"Episode 1.avi","attr":{"rel":"file"}},{"data":"Episode 2.avi","attr":{"rel":"file"}}],"attr":{"rel":"folder"}}]
    },

    "types" : {
        "max_depth" : -2,
        "max_children" : -2,
        "valid_children" : ["drive"],
        "types" : {
            "folder" : {
                "valid_children" : ["default", "folder"],
                "icon" : {
                    "image" : "images/folder.png"
                }
            },
            "file" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "images/file.png"
                }
            }
        }
    },

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

    "search" : {
        "case_insensitive" : true,
        "ajax" : {
            "url" : "/static/v.1.0pre/_docs/_search_result.json"
        }
    }

})

所以上面的代码就像jsTree那样工作。注释的json_data插件假定从指定的'Series.json'文件中读取完全相同的JSON数据，但是，当代码运行时，只显示加载的gif。

请帮忙。

提前致谢，格兰特

Answer 1

这似乎是一个普遍的问题。无论如何，进行ajax调用以获取所需的json文件，如下所示。

"json_data":{
    "ajax" : {
        "url" : "info.json"  // the URL to fetch the data. Use relative url if required
     }
}

这肯定有用！

干杯！

Answer 2

我刚试过上面的例子而且他们不适合我。 github examples code中的以下内容正常工作：

$('#ajax').jstree({
    'core' : {
        'data' : {
            "url" : "./root.json",
            "dataType" : "json" // needed only if you do not supply JSON headers
        }
    }
});

从外部JSON文件填充jsTree

2 个答案: