使用xslt和XML生成所需的HTML

时间：2010-08-19 11:33:03

标签： xslt

我正在使用XSLT和XML，以便生成我想要的HTML。

我有两个XMLS，下面是详细信息。

1）Destinations.XML 

<?xml version="1.0"?>
<list type="Destinations">
<resources location="include/xml/locations.xml">
<publication>481</publication>
</resources>
<destination id="594051" title="Sydney" url="/asiapacific/australia/sydney.aspx" >
<country id="192395" />
</destination>
<destination id="594088" title="Brisbane" url="/asiapacific/australia/brisbane.aspx" >
<country id="192395" />
</destination>
<destination id="594579" title="Dubai" url="/middleeast/uae/dubai.aspx" >
<country id="192849" />
</destination>
<destination id="594580" title="Abu Dhabi" url="/middleeast/uae/abudhabi.aspx" >
<country id="192849" />
</destination>
</list>

2）Locations.xml 

<?xml version="1.0"?>
<list type="Locations">
<region id="192393" code="ASIA" name="Asia &amp; the Pacific" shortname="Asia &amp; the Pacific">
<country id="192395" code="AU" name="Australia" shortname="Australia">
<city id="192397" code="BNE" name="Brisbane" shortname="Brisbane">
<airport id="192399" code="BNE" name="Brisbane International Airport" shortname="Brisbane"></airport>
</city>
<city id="192409" code="SYD" name="Sydney" shortname="Sydney">
<airport id="192411" code="SYD" name="Kingsford Smith Airport" shortname="Sydney"></airport>
</city>
</country>
</region>
<region id="192847" code="MEAF" name="The Middle East &amp; Africa" shortname="The Middle East &amp; Africa">
<country id="192849" code="AE" name="United Arab Emirates" shortname="United Arab Emirates">
<city id="192851" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi">
<airport id="192853" code="AUH" name="Abu Dhabi" shortname="Abu Dhabi"></airport>
</city>
<city id="192855" code="DXB" name="Dubai" shortname="Dubai">
<airport id="192857" code="DXB" name="Dubai International Airport" shortname="Dubai"></airport>
</city>
</country>
</region>
</list>

如果你看到destinations.xml，我们得到了标题，例如“sydney”，还有url =“/ asiapacific / australia / sydney.aspx”以及国家ID = 192395，当你看到地点时。 xml上面还有Country ID = 192395和name =“Australia”，其上面有Region name =“Asia＆amp; Pacific”，现在我想使用这些xmls并编写XSLT以便destination.xml中的所有目标列表将显示带有国家名称和地区名称的网址，对于国家/地区，此网址将成为（/asiapacific/australia/index.aspx），对于区域，它将成为（/asiapacific/index.aspx），下面将生成HTML 

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable">
    <tbody>
        <tr>
            <th scope="col" class="first sortSelected">
                <div class="thPadding">
                    <a class="iconDownSortArrow" href="#">Destination</a></div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Country</a></div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Region</a></div>
            </th>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.aspx">Australia</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.aspx">Asia & Pacific</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.aspx">UAE</a></td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.aspx">Middle East</a></td>
        </tr>
    </tbody>
</table>

请建议使用XSLT，我想在超过20个目的地时使用分页，下面是分页的html。

<div class="continueBar">
    <div class="continueBarLeft">
        <strong>Displaying destinations 1-20 of 100</strong></div>
    <div class="continueBarRight">
        <ul class="paginationLinks">
            <!--<li class="noBorder"><a class="iconButtonBackBar" href="#">&nbsp;</a></li>-->
            <li class="noBorder"><span class="iconButtonBackBarOff">&nbsp;</span></li>
            <li><strong class="thisPage">1</strong></li>
            <li class="separatorLine">|</li>
            <li><a href="#">2</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">3</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">4</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">5</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">6</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">7</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">8</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">9</a></li>
            <li class="separatorLine">|</li>
            <li><a href="#">10</a></li>
            <!--<li class="last"><span class="iconButtonForwardBarOff">&nbsp;</span></li>-->
            <li class="last"><a class="iconButtonForwardBar" href="#">&nbsp;</a></li>
        </ul>
    </div>
    <div class="clearBoth">
    </div>
</div>

1 个答案:

答案 0 :(得分：2)

我不知道你想要什么样的“分页”，但这个样式表：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:key name="kCountryById" match="country" use="@id"/>
    <xsl:variable name="vLocations" select="document(/*/resources/@location)"/>
    <xsl:template match="list">
        <table width="100%" cellspacing="0" cellpadding="0" border="0" 
                                                          class="displayTable">
            <tbody>
                <tr>
                    <th scope="col" class="first sortSelected">
                        <div class="thPadding">
                            <a class="iconDownSortArrow" href="#">Destination</a>
                        </div>
                    </th>
                    <th scope="col" class="sortHover">
                        <div class="thPadding">
                            <a class="iconSortArrowOff" href="#">Country</a>
                        </div>
                    </th>
                    <th scope="col" class="sortHover">
                        <div class="thPadding">
                            <a class="iconSortArrowOff" href="#">Region</a>
                        </div>
                    </th>
                </tr>
                <xsl:apply-templates select="destination"/>
            </tbody>
        </table>
    </xsl:template>
    <xsl:template match="text()"/>
    <xsl:template match="destination">
        <xsl:variable name="vReverseURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" select="@url"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="vCountryURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" 
                                 select="substring-after($vReverseURL,'/')"/>
            </xsl:call-template>
            <xsl:text>/index.asp</xsl:text>
        </xsl:variable>
        <xsl:variable name="vRegionURL">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" 
                 select="substring-after(substring-after($vReverseURL,'/'),'/')"/>
            </xsl:call-template>
            <xsl:text>/index.asp</xsl:text>
        </xsl:variable>
        <xsl:variable name="me" select="."/>
        <xsl:for-each select="$vLocations">
            <tr>
                <td class="detail first">
                    <a class="arrowSmallFront" href="{$me/@url}">
                        <xsl:value-of select="$me/@title"/>
                    </a>
                </td>
                <td class="detail noLeftBorder">
                    <a class="arrowSmallFront" href="{$vCountryURL}">
                        <xsl:value-of 
                           select="key('kCountryById',$me/country/@id)/@name"/>
                    </a>
                </td>
                <td class="detail noLeftBorder">
                    <a class="arrowSmallFront" href="{$vRegionURL}">
                        <xsl:value-of 
                         select="key('kCountryById',$me/country/@id)/../@name"/>
                    </a>
                </td>
            </tr>
        </xsl:for-each>
    </xsl:template>
    <xsl:template name="reverse">
        <xsl:param name="string" select="''"/>
        <xsl:if test="$string != ''">
            <xsl:call-template name="reverse">
                <xsl:with-param name="string" select="substring($string,2)"/>
            </xsl:call-template>
            <xsl:value-of select="substring($string,1,1)"/>
        </xsl:if>
    </xsl:template>
</xsl:stylesheet>

输出：

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="displayTable">
    <tbody>
        <tr>
            <th scope="col" class="first sortSelected">
                <div class="thPadding">
                    <a class="iconDownSortArrow" href="#">Destination</a>
                </div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Country</a>
                </div>
            </th>
            <th scope="col" class="sortHover">
                <div class="thPadding">
                    <a class="iconSortArrowOff" href="#">Region</a>
                </div>
            </th>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/sydney.aspx">Sydney</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/asiapacific/australia/brisbane.aspx">Brisbane</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/australia/index.asp">Australia</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/asiapacific/index.asp">Asia &amp; the Pacific</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/dubai.aspx">Dubai</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a>
            </td>
        </tr>
        <tr>
            <td class="detail first">
                <a class="arrowSmallFront" href="/middleeast/uae/abudhabi.aspx">Abu Dhabi</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/uae/index.asp">United Arab Emirates</a>
            </td>
            <td class="detail noLeftBorder">
                <a class="arrowSmallFront" href="/middleeast/index.asp">The Middle East &amp; Africa</a>
            </td>
        </tr>
    </tbody>
</table>

注意：反向字符串模式以允许相对URL更改。具有多个文档源的密钥。

相关问题
最新问题