如何使用 Javascript 将 HTML 页面中的 XML 显示为可折叠和可展开的树？ [关闭]答案

【问题标题】：How to display XML in a HTML page as a collapsible and expandable tree using Javascript? [closed]如何使用 Javascript 将 HTML 页面中的 XML 显示为可折叠和可展开的树？ [关闭]
【发布时间】：2009-09-02 06:56:02
【问题描述】：

如何在 HTML 页面中将 XML 文档显示为可折叠和可展开的树？

我想在 HTML 页面中将 XML 文档显示为打印出来的漂亮的树形结构。我希望能够展开和折叠树枝。例如，Firefox 浏览器在您加载纯 XML 文件时执行此操作。我正在寻找如何使用 JavaScript 在客户端执行此操作。

【问题讨论】：

标签： javascript html xml tree

【解决方案1】：

Creating An XML Viewer With JScript - Exsead XML Power Scripting

Display XML Files with Javascript

更新：

似乎有比我多年前在上面列出的更好且更易于使用的替代方案：

https://www.jstree.com/

希望他们有所帮助。

【讨论】：

对 JStree 更新感到困惑。 JSTree 所需的 XML 格式非常具体。您不需要将它从一种 xml 格式转换为另一种吗？

【解决方案2】：

http://ajaxian.com/archives/jstree-jquery-based-javascript-tree-component这里可以找到一堆带有解决方案的js库

【讨论】：

【解决方案3】：

这个库为您完成所有工作：

http://www.openjsan.org/doc/k/ka/kawasaki/XML/ObjTree/0.24/lib/XML/ObjTree.html

var js = (new XML.ObjTree).parse("<?xml version="1.0"?><response><error>0</error></response>");

然后你就有了一个 JavaScript 树，你可以随心所欲地显示它。您可能想尝试使用 YAHOO.widget.TreeView 模块，因为它将创建一个“可扩展和可折叠的树”。也就是说，如果您喜欢 YUI 库，否则 Dojo 和 Ext 库可以为您创建树视图。

【讨论】：

【解决方案4】：

如果您使用的是 ASP.NET 应用程序，则不需要客户端功能。您可以使用以下指定的方法：-

//Populate the below varaible value from your business logic
string xmlContent = "<?xml version=\"1.0\"><root><emp><name>name 1</name></emp><emp><name>name 2</name></emp></root>";
Response.Clear();
Response.ContentType = "text/xml"; //Set the contenttype to text/xml so the browser automatically recognises and displays it in the hierarchical structure
Response.Write(xmlContent);
Response.Flush();
Response.End();

【讨论】：

这将导致服务器响应是整个 XML 文档。我一直在寻找 HTML 页面的一部分是打印的 XML 的解决方案。以及基于客户端/Javascript 的解决方案。

【解决方案5】：

您好，只需将其添加到您的页面标题即可。

<?php

header("Content-type: text/xml");

$xml = new SimpleXMLElement('<xml/>');

for ($i = 1; $i <= 8; ++$i) {
    $track = $xml->addChild('track');
    $track->addChild('path', "song$i.mp3");
    $track->addChild('title', "Track $i - Track Title");
}

print($xml->asXML());
?>

【讨论】：