> 백엔드 개발 > XML/RSS 튜토리얼 > XML 데이터를 HTML로 변환하는 샘플 코드에 대한 자세한 소개

XML 데이터를 HTML로 변환하는 샘플 코드에 대한 자세한 소개

黄舟
풀어 주다: 2017-03-11 17:35:31
원래의
2227명이 탐색했습니다.

간단한 XSL 스타일시트를 사용하여 XML 데이터를 HTML로 변환합니다. XML 사양이 계속 발전함에 따라 새 버전에서 모든 사람의 요구를 충족해야 하는 것 같습니다. 페이지의 콘텐츠를 나타내는 XML 데이터가 있고 이제 해당 콘텐츠를 레이아웃으로 변환하려고 한다고 가정해 보겠습니다. 변환하려는 XML은 다음과 같습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

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

로그인 후 복사

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

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

로그인 후 복사

스타일시트 태그에는 모든 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 변환과 동일합니다. 마지막 단계는 각 파일에 필드를 추가하는 것입니다.
일반 레이아웃이 완료되면 사용자가 관련 탭을 클릭할 때까지 다른 폴더 및 파일 행을 숨기는 등의 사용자 인터페이스 기능 추가 시작할 수 있습니다. 이 기능은 이 기능을 지원하는 스크립트를 작성하고 onclick xsl:attribute 요소를 폴더 및 파일 TD 요소에 추가한 다음 해당 값을 스크립트 함수의 이름으로 설정하여 달성할 수 있습니다.
마지막으로 공통 기능이 완료된 후 xsl:attributes 클래스를 추가하고 STYLE 또는 CSS에 관련 className을 추가하여 원하는 모양을 얻을 수 있습니다.
이 예는 웹 데이터 솔루션 배포에 사용되는 파일-폴더-필드 보기에 대한 기반을 만듭니다. Microsoft의 XML 사양에 대해 자세히 알아보려면 MSDN을 방문하세요.

위 내용은 XML 데이터를 HTML로 변환하는 샘플 코드에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿