Question

我们有一个包含不同级别的xml文档：

<Root>
    <folder name="aaa">
        <folder name="abb">
            <file name="ccc.pdf" url="c:\test\ccc.pdf"/>
            <file name="ddd.pdf" url="c:\test\ddd.pdf"/>
            <file name="eee.pdf" url="c:\test\eee.pdf"/>
            <file name="fff.pdf" url="c:\test\fff.pdf"/>
        </folder>
        <folder name="acc">
            <file name="ggg.pdf" url="c:\test\ggg.pdf"/>
            <file name="hhh.pdf" url="c:\test\hhh.pdf"/>
        </folder>
    </folder>
    <folder name="bbb">
        <folder name="bba">
            <file name="iii.pdf" url="c:\test\iii.pdf"/>
        </folder>
        <folder name="bbc" />
    </folder>
    <folder name="ccc">
            <file name="iii.pdf" url="c:\test\iii.pdf"/>
            <file name="jjj.pdf" url="c:\test\jjj.pdf"/>
            <file name="kkk.pdf" url="c:\test\kkk.pdf"/>
            <file name="lll.pdf" url="c:\test\lll.pdf"/>
    </folder>
</Root>

我的问题是如何使用xsl使xml向下钻取，例如展开折叠（切换）文件夹名称。并使文件可链接（通过属性url）

Answer 1

这是你想要的吗？这将扫描所有元素，找到名为“file”的元素，并用可点击的链接替换它们。实际上，它只会生成一个可点击链接列表。所有文件夹信息都不可见。

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="root">
        <html>
            <head>
                <title>Clickable file URIs</title>
            </head>
            <body>
                <xsl:apply-templates select="//file" />
            </body>
        </html>
    </xsl:template>

    <xsl:template match="file">
        <a href="{@url}"><xsl:value-of select="@name" /></a><br />
    </xsl:template>
</xsl:stylesheet>

Answer 2

您计划实施树的计划将决定您需要如何构建输出结构。

以下是使用jQuery treeView的示例。

XML输入

<Root>
    <folder name="aaa">
        <folder name="abb">
            <file name="ccc.pdf" url="c:\test\ccc.pdf"/>
            <file name="ddd.pdf" url="c:\test\ddd.pdf"/>
            <file name="eee.pdf" url="c:\test\eee.pdf"/>
            <file name="fff.pdf" url="c:\test\fff.pdf"/>
        </folder>
        <folder name="acc">
            <file name="ggg.pdf" url="c:\test\ggg.pdf"/>
            <file name="hhh.pdf" url="c:\test\hhh.pdf"/>
        </folder>
    </folder>
    <folder name="bbb">
        <folder name="bba">
            <file name="iii.pdf" url="c:\test\iii.pdf"/>
        </folder>
        <folder name="bbc" />
    </folder>
    <folder name="ccc">
        <file name="iii.pdf" url="c:\test\iii.pdf"/>
        <file name="jjj.pdf" url="c:\test\jjj.pdf"/>
        <file name="kkk.pdf" url="c:\test\kkk.pdf"/>
        <file name="lll.pdf" url="c:\test\lll.pdf"/>
    </folder>
</Root>

XSLT 1.0

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>
    <xsl:strip-space elements="*"/>

    <xsl:template match="/*">
        <html>
            <head>
                <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
                <title>StackOverflow Test of jQuery treeView</title>

                <link rel="stylesheet" href="../jquery.treeview.css" />
                <link rel="stylesheet" href="../red-treeview.css" />
                <link rel="stylesheet" href="screen.css" />

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
                <script src="../lib/jquery.cookie.js" type="text/javascript"></script>
                <script src="../jquery.treeview.js" type="text/javascript"></script>

                <script type="text/javascript">
                    $(function() {
                    $("#browser").treeview();
                    });
                </script>

            </head>
            <body>
                <ul id="browser" class="filetree">                  
                    <xsl:apply-templates/>
                </ul>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="folder">
        <li>
            <span class="folder"><xsl:value-of select="@name"/></span>
            <xsl:if test="folder">
                <ul>
                    <xsl:apply-templates select="folder"/>
                </ul>
            </xsl:if>
            <xsl:if test="file">
                <ul>
                    <xsl:apply-templates select="file"/>
                </ul>
            </xsl:if>
        </li>
    </xsl:template>

    <xsl:template match="file">
        <li>
            <span class="file">
                <a href="file:///{translate(@url,'/','\')}">
                    <xsl:value-of select="@name"/>
                </a>                
            </span>
        </li>
    </xsl:template>

</xsl:stylesheet>

HTML输出

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>StackOverflow Test of jQuery treeView</title>
      <link rel="stylesheet" href="../jquery.treeview.css">
      <link rel="stylesheet" href="../red-treeview.css">
      <link rel="stylesheet" href="screen.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script src="../lib/jquery.cookie.js" type="text/javascript"></script><script src="../jquery.treeview.js" type="text/javascript"></script><script type="text/javascript">
                    $(function() {
                    $("#browser").treeview();
                    });
                </script></head>
   <body>
      <ul id="browser" class="filetree">
         <li><span class="folder">aaa</span><ul>
               <li><span class="folder">abb</span><ul>
                     <li><span class="file"><a href="file:///c:\test\ccc.pdf">ccc.pdf</a></span></li>
                     <li><span class="file"><a href="file:///c:\test\ddd.pdf">ddd.pdf</a></span></li>
                     <li><span class="file"><a href="file:///c:\test\eee.pdf">eee.pdf</a></span></li>
                     <li><span class="file"><a href="file:///c:\test\fff.pdf">fff.pdf</a></span></li>
                  </ul>
               </li>
               <li><span class="folder">acc</span><ul>
                     <li><span class="file"><a href="file:///c:\test\ggg.pdf">ggg.pdf</a></span></li>
                     <li><span class="file"><a href="file:///c:\test\hhh.pdf">hhh.pdf</a></span></li>
                  </ul>
               </li>
            </ul>
         </li>
         <li><span class="folder">bbb</span><ul>
               <li><span class="folder">bba</span><ul>
                     <li><span class="file"><a href="file:///c:\test\iii.pdf">iii.pdf</a></span></li>
                  </ul>
               </li>
               <li><span class="folder">bbc</span></li>
            </ul>
         </li>
         <li><span class="folder">ccc</span><ul>
               <li><span class="file"><a href="file:///c:\test\iii.pdf">iii.pdf</a></span></li>
               <li><span class="file"><a href="file:///c:\test\jjj.pdf">jjj.pdf</a></span></li>
               <li><span class="file"><a href="file:///c:\test\kkk.pdf">kkk.pdf</a></span></li>
               <li><span class="file"><a href="file:///c:\test\lll.pdf">lll.pdf</a></span></li>
            </ul>
         </li>
      </ul>
   </body>
</html>

HTML输出呈现

enter image description here

使xml向下钻取

2 个答案: