xml和xsl生成html页面

时间:2021-12-12 04:21:43
用xsl解析xml文件,遍历xml一个节点下的子节点,根据子节点的属性输出文本框或者是下拉框,或者是button。可以下载附件,双击xml即可看到效果

1。xsl文件的内容如下

<?xml version="1.0" encoding="utf-8"?>  
<xsl:stylesheet version="1.0"  
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml"
>
<!-- 定义一个template,生成文本框,根据xml设置文本框的id,name,click方法等,代码如下 -->
<xsl:template name="input">
<xsl:choose>
<xsl:when test="enable">
<xsl:if test="enable!='hidden'">
<xsl:if test="description">
<span class="name"><xsl:value-of select="description" />:</span>
</xsl:if>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="description">
<span class="name"><xsl:value-of select="description" />:</span>
</xsl:if>
</xsl:otherwise>
</xsl:choose>

    <xsl:element name="input">
    <xsl:attribute name="id"><xsl:value-of select="@name" /></xsl:attribute>
    <xsl:attribute name="name"><xsl:value-of select="@name" /></xsl:attribute>
    <xsl:attribute name="class">InputValue</xsl:attribute>
    <xsl:attribute name="type">text</xsl:attribute>
    <xsl:if test="enable = 'false'">
<xsl:attribute name="readonly">true</xsl:attribute>
</xsl:if>
<xsl:if test="enable = 'hidden'">
<xsl:attribute name="style">display:none</xsl:attribute>
</xsl:if>
<xsl:if test="default-value">
<xsl:attribute name="value"><xsl:value-of select="default-value" /></xsl:attribute>
</xsl:if>
<xsl:if test="comp/events/event">
<xsl:for-each select="comp/events/event">
<xsl:choose>
<xsl:when test="@type='click'">
<xsl:attribute name="onclick">
<xsl:value-of select="exec-method"></xsl:value-of>
</xsl:attribute>
</xsl:when>
<xsl:when test="@type='blur'">
<xsl:attribute name="onblur">
<xsl:value-of select="exec-method"></xsl:value-of>
</xsl:attribute>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:if>
    </xsl:element>
    <!-- 如果存在nobr标签,则不换行 -->
<xsl:choose>
<xsl:when test="nobr"></xsl:when>
<xsl:otherwise>
<div class="clear"></div>
</xsl:otherwise>
</xsl:choose>
    </xsl:template>

<!--结束生成text-->


<!-- 定义一个template,生成下拉框,根据xml设置文本框的id,name,change方法等,代码如下 -->
<xsl:template name="select">
<xsl:choose>
<xsl:when test="enable">
<xsl:if test="enable!='hidden'">
<xsl:if test="description">
<span class="name"><xsl:value-of select="description" />:</span>
</xsl:if>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="description">
<span class="name"><xsl:value-of select="description" />:</span>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
    <xsl:element name="select">
    <xsl:attribute name="id"><xsl:value-of select="@name" /></xsl:attribute>
    <xsl:attribute name="name"><xsl:value-of select="@name" /></xsl:attribute>
    <xsl:attribute name="class">SelectValue</xsl:attribute>
    <xsl:if test="comp/events/event">
<xsl:for-each select="comp/events/event">
<xsl:choose>
<xsl:when test="@type='change'">
<xsl:attribute name="onchange">
<xsl:value-of select="exec-method"></xsl:value-of>
</xsl:attribute>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:if>
    <xsl:choose>
    <xsl:when test="enable">
    <xsl:if test="enable = 'false'">
<xsl:element name="option">
<xsl:if test="default-text-value">
<xsl:attribute name="value"><xsl:value-of select="default-text-value/value" /></xsl:attribute>
<xsl:value-of select="default-text-value/text" />
</xsl:if>
</xsl:element>
</xsl:if>
<xsl:if test="enable = 'hidden'">
<xsl:attribute name="style">display:none</xsl:attribute>
<xsl:element name="option">
<xsl:if test="default-text-value">
<xsl:attribute name="value"><xsl:value-of select="default-text-value/value" /></xsl:attribute>
<xsl:value-of select="default-text-value/text" />
</xsl:if>
</xsl:element>
</xsl:if>
<xsl:if test="enable = 'true'">
<xsl:for-each select="values/text-value">
    <xsl:element name="option">
<xsl:attribute name="value"><xsl:value-of select="value" /></xsl:attribute>
<xsl:value-of select="text" />
</xsl:element>
    </xsl:for-each>
</xsl:if>
    </xsl:when>
    <xsl:otherwise>
    <xsl:for-each select="values/text-value">
    <xsl:element name="option">
<xsl:attribute name="value"><xsl:value-of select="value" /></xsl:attribute>
<xsl:value-of select="text" />
</xsl:element>
    </xsl:for-each>
    </xsl:otherwise>
    </xsl:choose>
    </xsl:element>
    <!-- 如果存在nobr标签,则不换行 -->
<xsl:choose>
<xsl:when test="nobr">  </xsl:when>
<xsl:otherwise>
<div class="clear"></div>
</xsl:otherwise>
</xsl:choose>
    </xsl:template>

<!--结束select-->

<!-- 定义一个template,生成button,根据xml设置文本框的id,name,click方法等,代码如下 -->

<xsl:template name="button">
    <xsl:element name="input">
    <xsl:if test="@name">
    <xsl:attribute name="id"><xsl:value-of select="@name" /></xsl:attribute>
    <!-- <xsl:attribute name="name"><xsl:value-of select="@name" /></xsl:attribute> -->
    </xsl:if>
    <xsl:attribute name="type">button</xsl:attribute>
    <xsl:choose>
    <xsl:when test="default-value">
    <xsl:attribute name="value">
    <xsl:value-of select="default-value"></xsl:value-of>
    </xsl:attribute>
    </xsl:when>
    <xsl:otherwise>
    <xsl:attribute name="value">确定</xsl:attribute>
    </xsl:otherwise>
    </xsl:choose>
    <xsl:if test="comp/events/event">
<xsl:for-each select="comp/events/event">
<xsl:choose>
<xsl:when test="@type='click'">
<xsl:attribute name="onclick">
<xsl:value-of select="exec-method"></xsl:value-of>
</xsl:attribute>
</xsl:when>
</xsl:choose>
</xsl:for-each>
</xsl:if>
    </xsl:element>
    <!-- 如果存在nobr标签,则不换行 -->
<xsl:choose>
<xsl:when test="nobr">  </xsl:when>
<xsl:otherwise>
<div class="clear"></div>
</xsl:otherwise>
</xsl:choose>
    </xsl:template>

<!--结束button-->

<!--上面的三段template相当于三个组件,下面的代码是解析xml,生成相应的组件,代码如下-->
<xsl:for-each select="parameters/param">
        <xsl:choose>
        <xsl:when test="comp">
        <xsl:choose>
        <xsl:when test="comp/@type='input'">
[color=red]         <xsl:call-template name="input"></xsl:call-template>[color=red]
        </xsl:when>
        <xsl:when test="comp/@type='select'">
        <xsl:call-template name="select"></xsl:call-template>
        </xsl:when>
        <xsl:when test="comp/@type='button'">
        <xsl:call-template name="button"></xsl:call-template>
        </xsl:when>
        <xsl:otherwise>
        <xsl:call-template name="input"></xsl:call-template>
        </xsl:otherwise>
        </xsl:choose>
        </xsl:when>
        <xsl:otherwise>
        <xsl:call-template name="input"></xsl:call-template>
        </xsl:otherwise>
        </xsl:choose>
       
       
        </xsl:for-each>

<!--结束-->

<!--下面是xml的内容-->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="bussiness/common/common.xsl"?>
<parameters>
     <param name="title">
<description>标题</description>
<data-type>varchar</data-type>
<enable>true</enable>
<time-value>aaa</time-value>
</param>
<param name="titleSize">
<description>标题字体</description>
<comp type="select"></comp>
<values>
<text-value>
<text>1px</text>
<value>1</value>
</text-value>
<text-value>
<text>2px</text>
<value>2</value>
</text-value>
<text-value>
<text>3px</text>
<value>3</value>
</text-value>
<text-value>
<text>4px</text>
<value>4</value>
</text-value>
<text-value>
<text>5px</text>
<value>5</value>
</text-value>
</values>
<time-value>3</time-value>
</param>
<param name="lineShape">
<description>线    型</description>
<comp type="select"></comp>
<values>
<text-value>
<text>1px</text>
<value>1</value>
</text-value>
<text-value>
<text>2px</text>
<value>2</value>
</text-value>
<text-value>
<text>3px</text>
<value>3</value>
</text-value>
<text-value>
<text>4px</text>
<value>4</value>
</text-value>
<text-value>
<text>5px</text>
<value>5</value>
</text-value>
</values>
<time-value>3</time-value>
</param>
<param name="lineWidth">
<description>线条宽度</description>
<enable>true</enable>
<comp type="select"></comp>
<values>
<text-value>
<text>1px</text>
<value>1</value>
</text-value>
<text-value>
<text>2px</text>
<value>2</value>
</text-value>
<text-value>
<text>3px</text>
<value>3</value>
</text-value>
<text-value>
<text>4px</text>
<value>4</value>
</text-value>
<text-value>
<text>5px</text>
<value>5</value>
</text-value>
</values>
<time-value>3</time-value>
</param>
<param name="lineColor">
<description>线条颜色</description>
<enable>false</enable>
<time-value>red</time-value>
<nobr />
</param>
<param name="btnColor">
<default-value>选色</default-value>
<enable>true</enable>
<comp type="button">
</comp>
</param>
<param name="position">
<enable>hidden</enable>
<default-value>2</default-value>
<nobr />
<time-value>2</time-value>
</param>
</parameters>