新手求助：如何用XSLT将文件结构XML转换为HTML树

嗨，别担心！我一步步带你实现用XSLT把你的文件夹/文件XML结构转成HTML树形结构的需求，因为你的container是嵌套的，所以核心就是用递归模板来处理层级关系。下面是具体步骤：

第一步：整理完整的XML示例 #

你给的XML内容不完整，我先补全一个合理的版本方便测试：

<?xml version="1.0" encoding="UTF-8"?>
<structure>
  <container>
    <name>Container A</name>
    <item>
      <name>Item A</name>
    </item>
    <container>
      <name>Container A A</name>
      <item>
        <name>Item B</name>
      </item>
      <item>
        <name>Item A B</name>
      </item>
    </container>
  </container>
  <container>
    <name>Container B</name>
    <item>
      <name>Item C</name>
    </item>
  </container>
</structure>

第二步：编写XSLT转换文件 #

这个XSLT会递归处理每个嵌套的container，生成带样式的HTML树形结构：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" encoding="UTF-8"/>

  <!-- 主模板：生成完整HTML页面框架 -->
  <xsl:template match="/">
    <html>
      <head>
        <title>文件/文件夹树形结构</title>
        <style>
          .tree-root { margin: 15px; font-family: Arial, sans-serif; }
          .container { margin-left: 25px; margin-top: 5px; font-weight: 600; }
          .item { margin-left: 25px; margin-top: 3px; color: #444; }
          /* 用图标区分文件夹和文件 */
          .container::before { content: "📁 "; }
          .item::before { content: "📄 "; }
        </style>
      </head>
      <body>
        <div class="tree-root">
          <!-- 处理根结构下的所有顶级container -->
          <xsl:apply-templates select="structure/container"/>
        </div>
      </body>
    </html>
  </xsl:template>

  <!-- 递归处理container模板 -->
  <xsl:template match="container">
    <div class="container">
      <xsl:value-of select="name"/>
      <!-- 处理当前container下的所有item和子container -->
      <div>
        <xsl:apply-templates select="item"/>
        <xsl:apply-templates select="container"/>
      </div>
    </div>
  </xsl:template>

  <!-- 处理item模板 -->
  <xsl:template match="item">
    <div class="item">
      <xsl:value-of select="name"/>
    </div>
  </xsl:template>
</xsl:stylesheet>

第三步：关联XML和XSLT并运行 #

在你的XML文件开头添加一行引用XSLT的声明（假设XSLT文件名为structure.xsl）：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="structure.xsl"?>
<!-- 后面是你的XML结构内容 -->

然后直接用浏览器打开这个XML文件，就能看到生成的HTML树形结构了！

进阶：添加折叠展开功能 #

如果想要点击文件夹可以折叠/展开子内容，只需要稍微修改XSLT的样式和模板：

<!-- 修改主模板里的style部分 -->
<style>
  .tree-root { margin: 15px; font-family: Arial, sans-serif; }
  .container { margin-left: 25px; margin-top: 5px; }
  .container-header { font-weight: 600; cursor: pointer; }
  .container-header::before { content: "📁 "; }
  .container-content { display: none; margin-top: 3px; }
  .container.expanded .container-content { display: block; }
  .item { margin-left: 25px; margin-top: 3px; color: #444; }
  .item::before { content: "📄 "; }
</style>

<!-- 修改container模板 -->
<xsl:template match="container">
  <div class="container">
    <div class="container-header"><xsl:value-of select="name"/></div>
    <div class="container-content">
      <xsl:apply-templates select="item"/>
      <xsl:apply-templates select="container"/>
    </div>
  </div>
  <!-- 添加JS实现折叠逻辑 -->
  <script>
    document.querySelectorAll('.container-header').forEach(header => {
      header.addEventListener('click', () => {
        header.parentElement.classList.toggle('expanded');
      });
    });
  </script>
</xsl:template>

这样点击文件夹名称就能切换展开/折叠状态，体验更好～

内容的提问来源于stack exchange，提问作者mike k