Detaillierte Einführung in den Beispielcode zur Konvertierung von XML-Daten in HTML

Verwenden Sie ein einfaches XSL-Stylesheet, um XML-Daten in HTML zu konvertieren. Da sich die XML-Spezifikation weiterentwickelt, scheint es notwendig zu sein, in der neuen Version alle Anforderungen zu erfüllen. Nehmen wir an, Sie verfügen über XML-Daten, die den Inhalt einer Seite darstellen, und möchten nun deren Inhalt in ein Layout konvertieren. Hier ist das XML, das Sie konvertieren möchten:

<?xmlversion=&#39;1.0&#39;?> 
<?xml-stylesheettype="text/xsl"href="article.xsl"?> 
<xml> 
<folders> 
<folder> 
<text>Folder1</text> 
<files> 
<file> 
<text>File1</text> 
<fields> 
<field> 
<data> 
<type>string</type> 
<length>50</length> 
<value>somedata</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 für Eingabedaten. 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.
Das Folgende ist das für diese Transformation verwendete XSL:

<?xmlversion="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.aaa.com/aaa> 
<xsl:outputmethod="html"/> 
<msxsl:scriptlanguage="JScript"implements-prefix="fn"> 
functiongetElementCount(nodelist,what){ 
varrtrn=0; 
rtrn=nodelist[0].parentNode.selectNodes(what).length; 
return(rtrn 1);//1isaddedforfillerTD 
} 
</msxsl:script> 
<xsl:templatematch="/"> 
<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"ID="tblRoot"NAME="tblRoot" 
style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="xml/folders/folder"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;folder&#39;)"/> 
</xsl:attribute> 

<TABLECELLSPACING="0"CELLPADDING="0" 
WIDTH="100%"BORDER="0"style="table-layout:fixed;"> 
<TR> 
<xsl:for-eachselect="files/file"> 
<xsl:elementname="TD"> 
<xsl:attributename="style">width:55px;</xsl:attribute> 
<xsl:value-ofselect="text"/> 
</xsl:element> 
</xsl:for-each> 
<TD></TD> 
</TR> 
<xsl:for-eachselect="files/file"> 
<TR> 
<xsl:elementname="TD"> 
<xsl:attributename="colspan"> 
<xsl:value-ofselect="fn:getElementCount(.,&#39;file&#39;)"/> 
</xsl:attribute> 
<xsl:for-eachselect="fields/field"> 
<xsl:elementname="INPUT"> 
<xsl:attributename="type">text</xsl:attribute> 
<xsl:attributename="maxlength"> 
<xsl:value-ofselect="data/length"/> 
</xsl:attribute> 
<xsl:attributename="value"> 
<xsl:value-ofselect="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 sind mehrere Namespaces festgelegt, einschließlich der Definition aller XSL-Transformationen Der XSL-Namespace des Tags. Ein MSXML-Namespace, der es uns ermöglicht, BenutzerFunktionen zu erstellen, die in Stylesheets verwendet werden können. Verwenden Sie dies, um alle untergeordneten Elemente abzurufen, um einen Satz COLSPAN-Attribute für ein TD-Tag zu erhalten. 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. Erstellen Sie im TR ein TD für jeden im XML angegebenen Ordner. Das xsl:element-Tag wird verwendet, weil es das Hinzufügen benutzerdefinierter Attribute oder das Ausführen einer Funktion zum Festlegen einer Eigenschaft für das COLSPAN-Attribut in einem anderen TD-Element ermöglicht.
Nachdem Sie für jeden Ordner das erforderliche TD erstellt haben, beginnen Sie mit der Erstellung von TR für jeden Ordner. Fügen Sie diesem TR nur ein TD hinzu, aber setzen Sie dessen COLSPAN-Attribut 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, übergeben Sie den aktuellen Kontext (hier durch „.“ angegeben) und den Namen des zu berechnenden Knotens. Rufen Sie in der Funktion den aktuellen Kontext, paraentNode und die Anzahl der in XPath query angegebenen Knoten ab. Die Funktion gibt dann diesen Betrag plus eins zurück, um den TD zu füllen.
Betten Sie mit diesem TD eine weitere TABLE 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.
Sobald das allgemeine Layout fertig ist, können Sie mit dem Hinzufügen von Benutzeroberflächenfunktionen beginnen, wie z. B. dem Ausblenden anderer Ordner und Dateizeilen, bis der Benutzer auf die entsprechende Registerkarte klickt. Diese Funktionalität kann erreicht werden, indem ein Skript geschrieben wird, das diese Funktionalität unterstützt, ein onclick xsl:attribute-Element zu den Ordner- und Datei-TD-Elementen hinzugefügt wird und dann dessen Wert auf den Namen der Skriptfunktion gesetzt wird.
Schließlich, 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 Dateiordnerfeld-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 detaillierte Inhalt vonDetaillierte Einführung in den Beispielcode zur Konvertierung von XML-Daten in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!