Question

我正在尝试将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 **：

enter image description here

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

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

对此事项的任何帮助或指导将不胜感激。

Answer 1

我假设Employees_xml_flat.xml的网址是正确的。然后变量 xmlData 应该是一个包含xml样本文件数据的字符串。

另外，我假设您将与jstree包一起使用的“themes”文件夹放在与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）。默认为false。

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

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

该行

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

因此不再需要

。但即使你想要保持这条线，它应该正常工作。在Chrome，IE和Firefox中测试过。

IE8更新

我看看我是否得到了与IE8相同的结果。打开了上面代码中的确切html文件，只不过我用https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js替换了jquery.js。可以在this image中看到此测试的结果。正如您所看到的，代码也适用于IE8。

您使用的是哪个版本的jQuery？您使用的是1.7.2版本吗？可能是你的jQuery.js文件在某种程度上被破坏了吗？

另一次更新

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

<!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">

jsTree没有填充浏览器，如IE，Google Chrome

1 个答案:

更新

IE8更新

另一次更新