Convert XML data to HTML using XSLT

Use a simple XSL stylesheet to convert xml data into HTML. As the XML specification continues to evolve, it seems necessary to satisfy everyone's needs in new versions; unfortunately, making simple transformations has always plagued the specification.

Suppose I have an XML data representing the content of a page, and now I want to convert its content into a layout. Here is the XML I want to convert:

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

This content represents a set of folders, files, and fields. Each folder contains files, and each file contains fields for entering data. Each folder in the folder group will be represented by a TR element and a TD element in the first row of a TABLE. Each file in the file group will be represented as a TR element and a TD element on the first line of a TABLE element nested within the folder TR element. Each domain in the domain group will appear as an INPUT in the associated file.

To implement this idea, we need to traverse the XML and then build a table based on the XSL.

Here is the XSL used for this transformation:

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

In the stylesheet tag, we set up several namespaces, including the xsl namespace that defines all xsl transformation tags. msxml namespace that allows us to create user functions that can be used in stylesheets. I use this to get all child elements in order to get a COLSPAN attribute set for a TD tag. The fn namespace used to join a set of user-defined functions created by the msxml:script element.

Then, we create the outer TABLE and the first TR. In the TR, I create a TD for each folder specified in the XML. I used the xsl:element tag because it allows me to add custom attributes or perform a function that sets a property for the COLSPAN attribute in another TD element.

After creating the required TD for each folder, I started creating the TR for each folder. I only add one TD to this TR, but I set its COLSPAN property equal to the number of folder tags in the folder group plus one. The extra one is used to fill spaces in a fixed layout TABLE.

To get COLSPAN, I pass in the current context (specified here by ".") and the name of the node I want to calculate. In my function, I get the current context, paraentNode, and the number of nodes specified in the XPath query. The function then returns this amount plus one to fill the TD.

With this TD, I embed another TABLE in it that contains each file in the filegroup. From this point on, the process is the same as for an external TABLE conversion. The final step is to add the fields in each file. This time I did not create an embedded TABLE again, just added the fields to the current TD.

Once I've completed the general layout, I can start adding user interface features, such as hiding other folders and file rows until the user clicks on the relevant tab. This functionality can be achieved by writing a script that supports this functionality, adding an onclick xsl:attribute element to the folder and file TD elements, and then setting its value to the name of the script function.

Finally, after the common functionality is completed, you can add class xsl:attributes and add related classNames in STYLE or CSS to get the look you want.

This example creates a basis for the File-Folder-Field view used in deploying web data solutions. Visit MSDN to find out more about Microsoft's XML specification.

The above is the content of using XSLT to convert XML data into HTML. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!