使用XSLT从XML集合创建HTML树

时间:2014-07-11 15:34:33

标签: html xml xslt msxsl

最近我实现了XSLT,它将任何XML转换为表示为嵌套无序列表的HTML树视图。以下是此XSLT的简化版本:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="no"/>
    <xsl:strip-space elements="*"/>
    <xsl:template match="/">
        <html>
            <body>
                <xsl:apply-templates select="." mode="render"/>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="/" mode="render">
        <div>
            <ul>
                <xsl:apply-templates mode="render"/>
            </ul>
        </div>
    </xsl:template>
    <xsl:template match="*" mode="render">
        <li>
            <span>
                <xsl:value-of select="local-name()"/>
            </span>
            <div>
                <xsl:if test="./text()">
                    <span>
                        <xsl:value-of select="translate(./text(),' ','&#160;')"/>
                    </span>
                </xsl:if>
                <xsl:if test="count(child::*)>0 or count(attribute::*)>0">
                    <ul>
                        <xsl:apply-templates select="@*" mode="render"/>
                        <xsl:apply-templates select ="*" mode="render"/>
                    </ul>
                </xsl:if>
            </div>
        </li>
    </xsl:template>
    <xsl:template match="@*" mode="render">
        <li>
            <span>
                <xsl:value-of select="local-name()"/>
            </span>
            <div>
                <span>
                    <xsl:value-of select="translate(.,' ','&#160;')"/>
                </span>
            </div>
        </li>
    </xsl:template>
</xsl:stylesheet>

请注意,此XSLT不依赖于XML架构。所以它可以应用于任何XML。 例如,给定输入XML

<Catalog xmlns="somenamespace">
    <CatalogName>First catalog</CatalogName>
    <Products>
        <Product id="p1">
            <Name>Some product</Name>
            <Description>foo</Description>
        </Product>
        <Product id="p2">
            <Name>Another product</Name>
            <Description>bar</Description>
        </Product>
    </Products>
</Catalog>

将创建所需的树视图

<html>
<body>
    <div>
        <ul>
            <li>
                <span>Catalog</span>
                <div>
                    <ul>
                        <li>
                            <span>CatalogName</span>
                            <div>
                                <span>First catalog</span>
                            </div>
                        </li>
                        <li>
                            <span>Products</span>
                            <div>
                                <ul>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Some product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>foo</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p2</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Another product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>bar</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

问题是输入XMl的结构已经改变。事实上,现在它看起来像是包含在某个根节点中的XML文档集合。见下面的例子:

<Catalogs xmlns="somenamespace">
    <Catalog>
        <CatalogName>First catalog</CatalogName>
        <Products>
            <Product id="p1.1">
                <Name>Some product</Name>
                <Description>foo</Description>
            </Product>
            <Product id="p1.2">
                <Name>Another product</Name>
                <Description>bar</Description>
            </Product>
        </Products>
    </Catalog>
    <Catalog>
        <CatalogName>Second catalog</CatalogName>
        <Products>
            <Product id="p2.1">
                <Name>Some product</Name>
                <Description>hoho</Description>
            </Product>
            <Product id="p2.2">
                <Name>Strange product</Name>
                <Description>bar</Description>
            </Product>
        </Products>
    </Catalog>
...
</Catalogs>

要求是输出应显示为&#34;合并的树#34;集合,其中所有不同的值与逗号连接。查看所需的输出:

<html>
<body>
    <div>
        <ul>
            <li>
                <span>Catalog</span>
                <div>
                    <ul>
                        <li>
                            <span>CatalogName</span>
                            <div>
                                <span>First catalog, Second catalog</span>
                            </div>
                        </li>
                        <li>
                            <span>Products</span>
                            <div>
                                <ul>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1.1, p2.1</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Some product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>foo, hoho</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <span>Product</span>
                                        <div>
                                            <ul>
                                                <li>
                                                    <span>id</span>
                                                    <div>
                                                        <span>p1.2, p2.2</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Name</span>
                                                    <div>
                                                        <span>Another product, Strange product</span>
                                                    </div>
                                                </li>
                                                <li>
                                                    <span>Description</span>
                                                    <div>
                                                        <span>bar</span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

请注意,XSLT仍然必须是&#34;架构免费&#34;。 我坚持这个问题。我看到的唯一解决方案是使用msxsl:script。但这是不可取的,因为在这种情况下,XSLT可能无法在我的应用程序之外工作。

有什么想法吗?

0 个答案:

没有答案