示例 jsTree 代码不起作用答案

【问题标题】：Sample jsTree code not working示例 jsTree 代码不起作用
【发布时间】：2012-08-02 10:50:49
【问题描述】：

<!DOCTYPE html>    
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script type="text/javascript"">
    alert($().jquery);
    alert($().jstree._themes);

    $(function () {
        $("#tree").jstree({
            "json_data" : {
                "ajax" : {
                    "url" : "/home/antonio/tomcat/webapps/jstree/_docs/_json_data.json",
                    "data" : function (n) {
                        return { id : n.attr ? n.attr("id") : 0 };
                    }
                }
            },
        "plugins" : [ "themes", "json_data" ]
    });
});

</script>

</head>
<body>
    <h> Hello </h>
    <div id='tree'></div>

</body>
</html>

好吧，主要问题是示例代码不起作用。当我尝试显示此页面时，会出现加载树的动画，但它会永远挂起并且不显示任何内容。

jquery 的版本显示正确。以及下一个警报。

我做错了什么？

【问题讨论】：

标签： javascript ajax json jstree

【解决方案1】：

请使用适当的编辑器（并查看浏览器控制台..）。我将您的代码粘贴到 Netbeans 中（我也将它用于 Java），它已经向我显示了这些错字：

<script type="text/javascript"">
The double quote.

<h> Hello </h>
The invalid h tag.

应该是这样的

<script type="text/javascript">

<h1> Hello </h1>

此外，您还想添加 CSS，对吧..

我找到了一些 jquery.jstree.js，但它在没有任何客户端代码的情况下给了我一个错误。请通过 url 或 jsfiddle 示例提供示例的来源。

【讨论】：

感谢您发现错误，但导致错误的那一行是：“url”：“/home/antonio/tomcat/webapps/jstree/_docs/_json_data.json”，Insted其中我已经使用了另一个“url”：“localhost:7777/jstree/_docs/_json_data_123.json”，现在可以正常工作了。
也许您想将答案作为解决方案发布/删除线程？

【解决方案2】：

这是我找到的解决问题的方法。

<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script type="text/javascript">
    alert($().jquery);
    alert($().jstree._themes);
    $(function () {
        $("#tree").jstree({
            "json_data" : {
                "ajax" : {
                    "url" : function (node) {
                        if (node == -1)
                        {
                            url = loadRoot();
                        }
                        else {
                            url = loadNode(node);  
                        }

                        return url;
                    },
                    "data" : function (n) {
                        return { id : n.attr ? n.attr("id") : 0 };
                    }
                }
            },
        "plugins" : [ "themes", "json_data" ]
    });
});

function loadRoot() {
    return "http://localhost:7777/jstree/_docs/_json_data_123.json";
}

function loadNode(node) {
    var nodeId = "";
    var url = "";

    nodeId = node.attr('id');

    //Call the function that will retrieve the information.
    // fetchData();

    url = "http://localhost:7777/jstree/_docs/_json_data_0"+nodeId+".json";  
    return url;                    
}

</script>

</head>
<body>
    <h1> Hello </h1>
    <div id='tree'></div>

</body>
</html>

【讨论】：