XSLT를 사용하여 XML 데이터를 HTML로 변환

간단한 XSL 스타일시트를 사용하여 xml 데이터를 HTML로 변환합니다. XML 사양이 계속해서 발전함에 따라 새 버전에서 모든 사람의 요구를 충족시키는 것이 필요한 것 같습니다. 불행히도 간단한 변환을 수행하는 것은 항상 사양을 괴롭혔습니다.

페이지의 콘텐츠를 나타내는 XML 데이터가 있고 이제 해당 콘텐츠를 레이아웃으로 변환하고 싶다고 가정해 보겠습니다. 변환하려는 XML은 다음과 같습니다.

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

이 콘텐츠는 폴더, 파일 및 필드 집합을 나타냅니다. 각 폴더에는 파일이 포함되어 있으며, 각 파일에는 데이터를 입력하기 위한 필드가 포함되어 있습니다. 폴더 그룹의 각 폴더는 TABLE의 첫 번째 행에 TR 요소와 TD 요소로 표시됩니다. 파일 그룹의 각 파일은 폴더 TR 요소 내에 중첩된 TABLE 요소의 첫 번째 줄에 TR 요소와 TD 요소로 표시됩니다. 도메인 그룹의 각 도메인은 관련 파일에 INPUT으로 표시됩니다.

이 아이디어를 구현하려면 XML을 탐색하고 XSL을 기반으로 테이블을 구축해야 합니다.

이 변환에 사용된 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>

스타일시트 태그에서는 모든 xsl 변환 태그를 정의하는 xsl 네임스페이스를 포함하여 여러 네임스페이스를 설정합니다. 스타일시트에서 사용할 수 있는 사용자 함수를 만들 수 있는 msxml 네임스페이스입니다. TD 태그에 설정된 COLSPAN 속성을 얻기 위해 모든 하위 요소를 가져오는 데 이것을 사용합니다. msxml:script 요소에 의해 생성된 사용자 정의 함수 집합을 결합하는 데 사용되는 fn 네임스페이스입니다.

그런 다음 외부 TABLE과 첫 번째 TR을 생성합니다. TR에서는 XML에 지정된 각 폴더에 대한 TD를 만듭니다. xsl:element 태그를 사용하면 사용자 정의 속성을 추가하거나 다른 TD 요소의 COLSPAN 속성에 대한 속성을 설정하는 기능을 수행할 수 있기 때문입니다.

폴더별로 필요한 TD를 만든 후 폴더별로 TR을 만들기 시작했습니다. 이 TR에는 TD를 하나만 추가하지만 COLSPAN 속성을 폴더 그룹의 폴더 태그 수에 1을 더한 것과 동일하게 설정했습니다. 여분의 하나는 고정 레이아웃 테이블의 공간을 채우는 데 사용됩니다.

COLSPAN을 얻으려면 현재 컨텍스트(여기서 "."로 지정됨)와 계산하려는 노드의 이름을 전달합니다. 내 함수에서는 현재 컨텍스트, paraentNode 및 XPath 쿼리에 지정된 노드 수를 가져옵니다. 그런 다음 함수는 이 금액에 TD를 채우기 위해 1을 더한 값을 반환합니다.

이 TD에는 파일 그룹의 각 파일이 포함된 또 다른 TABLE을 내부에 포함합니다. 이 시점부터 프로세스는 외부 TABLE 변환과 동일합니다. 마지막 단계는 각 파일에 필드를 추가하는 것입니다. 이번에는 임베디드 TABLE을 다시 생성하지 않고 현재 TD에 필드만 추가했습니다.

일반 레이아웃이 완성되면 사용자가 관련 탭을 클릭할 때까지 다른 폴더 및 파일 행을 숨기는 등의 사용자 인터페이스 기능을 추가할 수 있습니다. 이 기능은 이 기능을 지원하는 스크립트를 작성하고 onclick xsl:attribute 요소를 폴더 및 파일 TD 요소에 추가한 다음 해당 값을 스크립트 함수의 이름으로 설정하여 달성할 수 있습니다.

마지막으로 공통 기능이 완료된 후 xsl:attributes 클래스를 추가하고 STYLE 또는 CSS에 관련 className을 추가하여 원하는 모양을 얻을 수 있습니다.

이 예는 웹 데이터 솔루션 배포에 사용되는 파일-폴더-필드 보기의 기초를 만듭니다. Microsoft의 XML 사양에 대해 자세히 알아보려면 MSDN을 방문하세요.

위 내용은 XSLT를 사용하여 XML 데이터를 HTML로 변환하는 내용입니다. 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!