2

我正在尝试将 xmlData 绑定到 jsTree 中，但数据没有被填充到 jsTree 中（除了 Mozila firefox）。

jsTree 在 Mozila firefox 中填充了示例数据，但在其他浏览器中没有

我在以下代码中遗漏了什么？

jsTreeDemo.html 文件：

    <html>
<head>
    <title>Use jsTree</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "Employees_xml_flat.xml",
            dataType: "text",
            success: function(xmlData) {
                $("#treeViewDiv").jstree({
                    "xml_data" : {
                        "data" : xmlData
                    },
                    "plugins" : [ "themes", "xml_data" ]
                });
            }
        });
    });

</script>
</head>
<body>

示例 xml 文件如下：

<root>  
    <item id="4" parent_id="0" state="open">  
        <content><name><![CDATA[Charles Madigen]]></name></content>  
    </item>  
    <item id="192" parent_id="4">    
  <content><name><![CDATA[Ralph Brogan]]></name></content>               
    </item>  
    <item id="295" parent_id="192">    
        <content><name><![CDATA[Bhushan Sambhus]]></name></content>  


    </item>  
    <item id="294" parent_id="192">    
        <content><name><![CDATA[Betsy Rosenbaum]]></name></content>  
    </item>  </root>

**Mozila firefox 11.0 版**：jsTree 填充良好

**Internet Explorer IE8 版本**：

在此处输入图像描述

Google Chrome 版本 18.0.1025.162 m **：什么都没有显示 :: 控制台出现错误 **XMLHttpRequest 无法加载 file:///C:/Users/VaibhaV/JsTreeDemo/files/Employees_xml_flat.xml。Access-Control-Allow-Origin 不允许 Origin null。

浏览器兼容性问题？代码问题？xml格式问题？

在此问题上的任何帮助或指导将不胜感激。

4

1 回答 1

4

让我假设 urlEmployees_xml_flat.xml是正确的。那么变量xmlData应该是一个包含 xml 示例文件数据的字符串。

还让我假设您将 jstree 包附带的“主题”文件夹与您的jquery.jstree.js文件放在同一个文件夹中。

我注意到的第一件事是您的示例 xml 文件在示例 xml 文件的末尾不包含</root>元素！如果您的示例 xml 文件不包含此元素，您的 jstree 将继续显示“正在加载...”。

此外，我没有使用 ajax 获取示例 xml 文件，而是手动将其放入字符串中（</root>文件末尾的 +）。我的结果表明，您的示例 xml 文件应该具有正确的文件格式，并且代码应该可以在 Firefox、Chrome 和 Internet Explorer 中运行。这是我的测试html文件：

<html>
<head>
    <title>Use jsTree</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jstree.js"></script>
    <script type="text/javascript">

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "Employees_xml_flat.xml",
            dataType: "text",
            success: function(xmlData) {
                $("#treeViewDiv").jstree({
                    "xml_data" : {
                        "data" : xmlData
                    },
                    "plugins" : [ "themes", "xml_data" ]
                });
            }
        });
    });

</script>
</head>
<body>
    <div id="treeViewDiv"></div>
</body>
</html>

更新

根据你的评论，我又看了一遍。查看 jstree 文档，数据将作为 XML 字符串添加：

数据

XML 字符串（如果不使用，则为 false）。默认为假。

指定要加载到容器中并转换为树的内容。

目前，由于您在 ajax 调用中选择了 dataType 为“xml”，因此返回对象是 XMLObject 而不是字符串。要让 ajax 调用返回纯文本字符串，请将 dataType 设置为“text”。我已经更新了上面的代码，它应该可以工作:)

线

var xmlstr = xmlData.xml ? xmlData.xml : ( new XMLSerializer()).serializeToString(xmlData);

因此不再需要。但即使你想保留这条线，它也应该能正常工作。在 Chrome、IE 和 firefox 中进行了测试。

IE8更新

如果我得到与您在 IE8 中相同的结果，我已经查看了。与上面的代码一样打开了确切的 html 文件，除了我将 jquery.js 替换为：https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js。该测试的结果可以在这张图片中看到。如您所见，该代码在 IE8 中也有效。

您使用的是什么版本的 jQuery？您使用的是 1.7.2 版吗？会不会是您的 jQuery.js 文件以某种方式损坏了？

另一个更新

可以在此处找到 Chrome 中导致的错误的解决方案。这绝对可以解决您在 Chrome 中的问题。至于 IE7 和 IE8：你必须在你的 html 页面中添加一个 DOCTYPE。IE：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
于 2012-04-18T20:12:02.813 回答