XMLデータをHTMLに変換するサンプルコードの詳細な紹介

単純な XSL スタイルシートを使用して、XMLデータを HTML に変換します。 XML 仕様は進化し続けるため、新しいバージョンではすべてのニーズを満たす必要があると思われます。ページのコンテンツを表す XML データがあり、そのコンテンツをレイアウトに変換するとします。変換する XML は次のとおりです:

85fa80ee361e700c2be4d997bc9733c9 
31fe81e98afd17e4b9a8a28bedee1cf1 
b2a0af5a8fd26276da50279a1c63a57a 
254d0476a3bbaede07403c5f35da3e25 
59ef88518edd60e9f6a2c9f2c966ac0c 
28f128881ce1cdc57a572953e91f7d0fFolder1273e21371c5d5e701d3c98517a0bfa41 
c6a235960c38d509b87ca752283a5cb2 
28897b20adb25fbae118a3f80f538dec 
28f128881ce1cdc57a572953e91f7d0fFile1273e21371c5d5e701d3c98517a0bfa41 
5d31de15119673d8345a6e7e4e3539c8 
d737d0a06790df603d79bb2c76c86712 
1d029f6197b5a3eb8a3fdf0a088ddf55 
7674b22ef33c73b930516fd6bc30b7a3string47da3aec5fea7de36e415e6398f16561 
d82af2074b26fcfe177e947839b5d381500a47fdba4028b9e1b40fb76257dcf69f 
8487820b627113dd990f63dd2ef215f3somedata4b175f9a50d57c75316becd702e959dc 
07b4fdd0136efc154b4b9d48cfcbbb9d 
6d2ce49320ba9a8e638019ef6c9bc2ef 
7e3a30f0b0961b04563491c9888611a7 
a83812d91bc3e67c6d4248fcc5008811 
917d3984ce33e8bdef33749ba625760b 
506346dddbef7ce31b7ff0aa13ddacdf 
c1a7601f3a9fa679b3cd6fdf4f6dbe8d 
21118965b89073f60271ef4a3b5d3c58

このコンテンツは、フォルダー、ファイル、およびフィールドのセットを表します。各フォルダー にはファイル が含まれており、各ファイルには入力データのフィールドが含まれています。フォルダー グループ内の各フォルダーは、TABLE の最初の行の TR 要素と TD 要素によって表されます。ファイル グループ内の各ファイルは、フォルダー TR 要素内にネストされた TABLE 要素の最初の行にある TR 要素および TD 要素として表されます。ドメイン グループ内の各ドメインは、関連ファイルの INPUT として表示されます。
以下は、この変換に使用される 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>

stylesheet タグでは、すべての xsl 変換タグの xsl 名前空間の定義を含む、いくつかの 名前空間 が設定されます。 msxml 名前空間を使用すると、スタイルシートで使用できるユーザー 関数 を作成できます。これを使用して、TD タグの COLSPAN 属性 のセットを取得するために、すべての子要素を取得します。 msxml:script 要素によって作成されたユーザー定義関数のセットを結合するために使用される fn 名前空間。 次に、外側の TABLE と最初の TR を作成します。 TR では、XML で指定されたフォルダーごとに TD を作成します。 xsl:element タグが使用されるのは、カスタム属性を追加したり、別の TD 要素の COLSPAN 属性のプロパティを設定する関数を実行したりできるためです。
各フォルダーに必要な TD を作成したら、フォルダーごとに TR の作成を開始します。この TR には TD を 1 つだけ追加しますが、その COLSPAN 属性をフォルダー グループ内のフォルダー タグの数に 1 を加えたものに設定します。余分なものは、固定レイアウトの TABLE 内のスペースを埋めるために使用されます。
COLSPAN を取得するには、現在のコンテキスト (ここでは「.」で指定) と計算するノードの名前を渡します。この関数では、現在のコンテキスト、paraentNode、
XPath query で指定されたノードの数を取得します。次に、関数は、TD を満たすためにこの量に 1 を加えた値を返します。 この TD を使用して、ファイル グループ内の各ファイルを含む別の TABLE を埋め込みます。この時点からのプロセスは、外部 TABLE 変換の場合と同じです。最後のステップは、各ファイルにフィールドを追加することです。
一般的なレイアウトが完了したら、ユーザーが関連するタブをクリックするまで
他のフォルダーやファイル行を非表示にする など、ユーザー インターフェイス機能の追加を開始できます。この機能は、この機能をサポートするスクリプトを作成し、onclick xsl:attribute 要素をフォルダーおよびファイルの TD 要素に追加し、その値をスクリプト関数の名前に設定することで実現できます。 最後に、共通の機能が完了したら、クラス xsl:attributes を追加し、関連する classNames を STYLE または CSS に追加して、希望する外観を得ることができます。 この例では、Web データ ソリューションのデプロイに使用されるファイル フォルダー フィールド view
の基礎を作成します。 Microsoft の XML 仕様の詳細については、MSDN にアクセスしてください。

以上がXMLデータをHTMLに変換するサンプルコードの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。