Javascript + Xslt 解析Xml为Html的方法

如果之前使用过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" οnclick="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>

 

Xml数据类似于：

<DealInfo><DealType Name="333" ID="101" BDPID="" BDP_IsRight="1"/>

<DealType Name="3333" ID="102" BDPID="" BDP_IsRight="1"/>

<DealDetail><TypeName>ddd</TypeName><TestData>512KB/2046KB</TestData><StandardValue>申请带宽(1024KB)</StandardValue><Conclusion>异常</Conclusion></DealDetail>

</DealInfo>

 

最终解析的结果