使用XSLT对XML进行排序并提取唯一项以生成HTML的技术需求

嘿，我看你需要把这份包含大学、讲师和课程的XML数据整理排序，输出成结构清晰的HTML对吧？没问题，我给你写个针对性的XSLT样式表，既能帮你完成排序，还能按大学、讲师自动分组，避免重复项～

首先先确认下你的原始XML（我帮你还原了转义的字符）：

<?xml version="1.0" encoding="utf-8" ?>
<global>
    <item university="Harvard" staff="Matt Dillon" course="American History"/>
    <item university="Harvard" staff="Matt Dillon" course="Philosophy"/>
    <item university="Harvard" staff="Matt Dillon" course="Social Psychology"/>
    <item university="Harvard" staff="Simon Pegg" course="Government"/>
    <item university="Harvard" staff="Simon Pegg" course="Sociobiology"/>
    <item university="Harvard" staff="Christian Bale" course="Astronomy"/>
    <item university="Harvard" staff="Christian Bale" course="Economics"/>
    <item university="Stanford" staff="Jean Reno" course="Computer Science"/>
</global>

实现思路 #

我们用Muenchian分组法（XSLT 1.0里最常用的分组技巧，兼容性拉满），先按university排序分组，再在每个大学下按staff分组，最后把每个讲师的课程列出来，全程保证排序有序。

完整XSLT代码 #

<?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"/>

    <!-- 定义分组键：按大学分组 -->
    <xsl:key name="uni-key" match="item" use="@university"/>
    <!-- 定义分组键：按大学+讲师分组 -->
    <xsl:key name="staff-key" match="item" use="concat(@university, '|', @staff)"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>University Course List</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 20px; }
                    .university { margin-bottom: 30px; }
                    .staff { margin-left: 20px; }
                    .courses { list-style-type: disc; margin-left: 40px; }
                </style>
            </head>
            <body>
                <!-- 遍历所有唯一的大学 -->
                <xsl:for-each select="global/item[generate-id() = generate-id(key('uni-key', @university)[1])]">
                    <!-- 按大学名称排序 -->
                    <xsl:sort select="@university" order="ascending"/>
                    <div class="university">
                        <h2><xsl:value-of select="@university"/></h2>
                        <!-- 遍历当前大学下所有唯一的讲师 -->
                        <xsl:for-each select="key('uni-key', @university)[generate-id() = generate-id(key('staff-key', concat(@university, '|', @staff))[1])]">
                            <!-- 按讲师名称排序 -->
                            <xsl:sort select="@staff" order="ascending"/>
                            <div class="staff">
                                <h3><xsl:value-of select="@staff"/></h3>
                                <!-- 遍历当前讲师下的所有课程并排序 -->
                                <ul class="courses">
                                    <xsl:for-each select="key('staff-key', concat(@university, '|', @staff))">
                                        <xsl:sort select="@course" order="ascending"/>
                                        <li><xsl:value-of select="@course"/></li>
                                    </xsl:for-each>
                                </ul>
                            </div>
                        </xsl:for-each>
                    </div>
                </xsl:for-each>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

生成的HTML效果 #

运行上面的XSLT后，你会得到结构清晰的HTML页面，大概长这样：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>University Course List</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .university { margin-bottom: 30px; }
        .staff { margin-left: 20px; }
        .courses { list-style-type: disc; margin-left: 40px; }
    </style>
</head>
<body>
    <div class="university">
        <h2>Harvard</h2>
        <div class="staff">
            <h3>Christian Bale</h3>
            <ul class="courses">
                <li>Astronomy</li>
                <li>Economics</li>
            </ul>
        </div>
        <div class="staff">
            <h3>Matt Dillon</h3>
            <ul class="courses">
                <li>American History</li>
                <li>Philosophy</li>
                <li>Social Psychology</li>
            </ul>
        </div>
        <div class="staff">
            <h3>Simon Pegg</h3>
            <ul class="courses">
                <li>Government</li>
                <li>Sociobiology</li>
            </ul>
        </div>
    </div>
    <div class="university">
        <h2>Stanford</h2>
        <div class="staff">
            <h3>Jean Reno</h3>
            <ul class="courses">
                <li>Computer Science</li>
            </ul>
        </div>
    </div>
</body>
</html>

这个样式表不仅完成了排序，还自动帮你去重分组，生成的HTML还带了基础样式，直接就能用～

备注：内容来源于stack exchange，提问作者MagicWorld