Konvertieren Sie XML-Daten mithilfe von XSLT in HTML

Konvertieren Sie XML-Daten mithilfe eines einfachen XSL-Stylesheets in HTML. Da sich die XML-Spezifikation weiterentwickelt, scheint es notwendig zu sein, in neuen Versionen alle Anforderungen zu erfüllen. Leider war die Spezifikation immer von der Durchführung einfacher Transformationen betroffen.

Angenommen, ich habe XML-Daten, die den Inhalt einer Seite darstellen, und möchte nun deren Inhalt in ein Layout konvertieren. Hier ist das XML, das ich konvertieren möchte:

<?xml version=&#39;1.0&#39;?>
<?xml-stylesheet type="text/xsl" href="article.xsl"?>
<xml>
    <folders>
        <folder>
            <text>Folder 1</text>
            <files>
                <file>
                    <text>File 1</text>
                    <fields>
                        <field>
                            <data>
                                <type>string</type>
                                <length>50</length>
                                <value>some data</value>
                            </data>
                        </field>
                    </fields>
                </file>
            </files>
        </folder>
    </folders>
</xml>

Dieser Inhalt stellt eine Reihe von Ordnern, Dateien und Feldern dar. Jeder Ordner enthält Dateien und jede Datei enthält Felder zur Dateneingabe. Jeder Ordner in der Ordnergruppe wird durch ein TR-Element und ein TD-Element in der ersten Zeile einer TABLE dargestellt. Jede Datei in der Dateigruppe wird als TR-Element und TD-Element in der ersten Zeile eines TABLE-Elements dargestellt, das im Ordner-TR-Element verschachtelt ist. Jede Domäne in der Domänengruppe wird als INPUT in der zugehörigen Datei angezeigt.

Um diese Idee umzusetzen, müssen wir das XML durchlaufen und eine Tabelle basierend auf XSL erstellen.

Hier ist das für diese Transformation verwendete XSL:

<?xml version="1.0"?>
<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:fn="http://www.mycompany.com/mynamespace">
<xsl:output method="html"/>
<msxsl:script language="JScript" implements-PRefix="fn">
    function getElementCount(nodelist, what) {
        var rtrn = 0;
        rtrn = nodelist[0].parentNode.selectNodes(what).length;
        return (rtrn + 1); //1 is added for filler TD
    }
</msxsl:script>
<xsl:template match="/">
<TABLE CELLSPACING="0" CELLPADDING="0"
    WIDTH="100%" BORDER="0" ID="tblRoot" NAME="tblRoot"
    style="table-layout:fixed;">
    <TR>
        <xsl:for-each select="xml/folders/folder">
        <xsl:element name="TD">
            <xsl:attribute name="style">width:55px</xsl:attribute>
            <xsl:value-of select="text"/>
        </xsl:element>
        </xsl:for-each>
        <TD> </TD>
    </TR>
    <xsl:for-each select="xml/folders/folder">
    <TR>
        <xsl:element name="TD">
            <xsl:attribute name="colspan">
                <xsl:value-of select="fn:getElementCount(., &#39;folder&#39;)"/>
            </xsl:attribute>
                
            <TABLE CELLSPACING="0" CELLPADDING="0"
                WIDTH="100%" BORDER="0" style="table-layout:fixed;">
                <TR>
                    <xsl:for-each select="files/file">
                    <xsl:element name="TD">
                        <xsl:attribute name="style">width:55px;</xsl:attribute>
                        <xsl:value-of select="text"/>
                    </xsl:element>
                    </xsl:for-each>
                    <TD> </TD>
                </TR>
                <xsl:for-each select="files/file">
                    <TR>
                        <xsl:element name="TD">
                            <xsl:attribute name="colspan">
                                <xsl:value-of select="fn:getElementCount(., &#39;file&#39;)"/>
                            </xsl:attribute>
                        <xsl:for-each select="fields/field">
                        <xsl:element name="INPUT">
                            <xsl:attribute name="type">text</xsl:attribute>
                            <xsl:attribute name="maxlength">
                                <xsl:value-of select="data/length"/>
                            </xsl:attribute>
                            <xsl:attribute name="value">
                                <xsl:value-of select="data/value"/>
                            </xsl:attribute>
                        </xsl:element><BR/>
                        </xsl:for-each>
                        </xsl:element>
                    </TR>
                </xsl:for-each>
            </TABLE>
        </xsl:element>
    </TR>
    </xsl:for-each>
</TABLE>
</xsl:template>
</xsl:stylesheet>

Im Stylesheet-Tag richten wir mehrere Namespaces ein, einschließlich des XSL-Namespace, der alle XSL-Transformations-Tags definiert. msxml-Namespace, der es uns ermöglicht, Benutzerfunktionen zu erstellen, die in Stylesheets verwendet werden können. Ich verwende dies, um alle untergeordneten Elemente abzurufen, um ein COLSPAN-Attribut für ein TD-Tag festzulegen. Der fn-Namespace, der zum Verbinden einer Reihe benutzerdefinierter Funktionen verwendet wird, die vom msxml:script-Element erstellt wurden.

Dann erstellen wir die äußere TABELLE und das erste TR. Im TR erstelle ich für jeden im XML angegebenen Ordner ein TD. Ich habe das xsl:element-Tag verwendet, weil es mir ermöglicht, benutzerdefinierte Attribute hinzuzufügen oder eine Funktion auszuführen, die eine Eigenschaft für das COLSPAN-Attribut in einem anderen TD-Element festlegt.

Nachdem ich die erforderlichen TDs für jeden Ordner erstellt hatte, begann ich mit der Erstellung von TRs für jeden Ordner. Ich füge diesem TR nur ein TD hinzu, aber ich setze seine COLSPAN-Eigenschaft auf die Anzahl der Ordner-Tags in der Ordnergruppe plus eins. Das zusätzliche wird verwendet, um Leerzeichen in einer TABLE mit festem Layout zu füllen.

Um COLSPAN zu erhalten, übergebe ich den aktuellen Kontext (hier angegeben durch „.“) und den Namen des Knotens, den ich berechnen möchte. In meiner Funktion erhalte ich den aktuellen Kontext, paraentNode und die Anzahl der in der XPath-Abfrage angegebenen Knoten. Die Funktion gibt dann diesen Betrag plus eins zurück, um den TD zu füllen.

Mit diesem TD bette ich darin eine weitere TABELLE ein, die jede Datei in der Dateigruppe enthält. Ab diesem Zeitpunkt ist der Vorgang derselbe wie bei einer externen TABLE-Konvertierung. Der letzte Schritt besteht darin, die Felder in jeder Datei hinzuzufügen. Dieses Mal habe ich keine eingebettete TABLE erneut erstellt, sondern nur die Felder zum aktuellen TD hinzugefügt.

Sobald ich das allgemeine Layout fertiggestellt habe, kann ich mit dem Hinzufügen von Benutzeroberflächenfunktionen beginnen, z. B. dem Ausblenden anderer Ordner und Dateizeilen, bis der Benutzer auf die entsprechende Registerkarte klickt. Diese Funktionalität kann erreicht werden, indem man ein Skript schreibt, das diese Funktionalität unterstützt, ein onclick xsl:attribute-Element zu den Ordner- und Datei-TD-Elementen hinzufügt und dann seinen Wert auf den Namen der Skriptfunktion setzt.

Abschließend, nachdem die allgemeine Funktionalität abgeschlossen ist, können Sie die Klasse xsl:attributes und zugehörige Klassennamen in STYLE oder CSS hinzufügen, um das gewünschte Aussehen zu erhalten.

Dieses Beispiel erstellt eine Grundlage für die Datei-Ordner-Feld-Ansicht, die bei der Bereitstellung von Webdatenlösungen verwendet wird. Besuchen Sie MSDN, um mehr über die XML-Spezifikation von Microsoft zu erfahren.

Das Obige ist der Inhalt der Verwendung von XSLT zum Konvertieren von XML-Daten in HTML. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).