Raymond Raymond

JavaScript + XSLT 解析XML为HTML的方法

event 2009-09-28 visibility 1,150 comment 0 insights
more_vert
insights Stats

如果之前使用过ASP的朋友应该知道,Msxml2.FreeThreadedDOMDocument.3.0,Msxml2.XSLTemplate.3.0等结合使用可以用于解析Xml为自定义的样式,比如特定的XML,只不过VBScript通过Server.CreateObject方法,而Javascript则使用ActiveObject。

创建这些对象的方法如下。

下面的代码摘自我的最近的一个项目中的,整个项目页面展示基本都用Xslt来解析XML数据, 在后台直接通过XsltTransform类,而在前台一些页面,则采用了Javascript来实现

function openBdp(bdpID,name)
        {
        var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
        var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
        var xmlDom =new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
        xslDoc.async = false;
        xmlDom.async = false;
        xslDoc.load('../Templates/test.xslt');      
        xmlDom.loadXML($get('dealInfoXml').value);
        xslt.stylesheet = xslDoc;
        
        var xslProc = xslt.createProcessor();
        xslProc.input=xmlDom;
//添加参数
xslProc.addParameter("bdpTypeName", name);               //转换       xslProc.transform();
//将转换结果设置为一个div的innerHTML       $get('iframeContainer').innerHTML=xslProc.output;       showPopup('ModalPopupShowDealDetail','预处理详情查看','popupTitle');       }//end function

Templates/test.xslt'代码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output encoding="utf-8" method="xml" omit-xml-declaration = "yes" indent="yes"/>
     <xsl:param name="rootPath"/>
     <xsl:param name="bdpTypeName"/>
     <xsl:param name="isDevice"/>
     <xsl:param name="isRight"/>
     <xsl:param name="showBtn"/>
     <xsl:template match="/">
        <xsl:if test="$isDevice='1'">
            ...           <br/>
        </xsl:if>
        <xsl:call-template name="showDealInfo"/>
     </xsl:template>
   <xsl:template name="showDealInfo">       <xsl:variable name="node" select="DealInfo/DealType[@Name=$bdpTypeName]"/>       <table class="listTable" cellspacing="0" cellpadding="3" rules="all" border="1" id="DataGridBDPDetails" style="width:100%;border-collapse:collapse;">          <tr class="header">             <td>类别</td>             <td>分类名称</td>             <td>测试结果</td>             <td>标准值</td>             <td>结论</td>          </tr>          <xsl:for-each select="$node/DealDetail">             <xsl:element name="tr">                <xsl:if test="position() mod 2 =0">                   <xsl:attribute name="style">background-color:#D2FFA6</xsl:attribute>                </xsl:if>                <td>                   <xsl:value-of select="$bdpTypeName"/>                </td>                <td>                   <xsl:value-of select="TypeName"/>                </td>                <td>                   <xsl:value-of select="TestData"/>                </td>                <td>                   <xsl:value-of select="StandardValue"/>                </td>                <td style="color:red;font-weight:bold">                   <xsl:value-of select="Conclusion"/>                </td>             </xsl:element>          </xsl:for-each>       </table>       <xsl:if test="$showBtn='1'">          <div style="text-align: center;margin:10px 0px">             <input class="button2d" onclick="window.close()" type="button" value=" 关 闭 " />          </div>       </xsl:if>    </xsl:template>
   <xsl:template name="blank">       <xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>    </xsl:template> </xsl:stylesheet>
More from Kontext
comment Comments
No comments yet.

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts