This site uses cookies to deliver our services. By using this site, you acknowledge that you have read and understand our Cookie and Privacy policy. Your use of Kontext website is subject to this policy. Allow Cookies and Dismiss

Javascript + Xslt 解析Xml为Html的方法

455 views 0 comments last modified about 9 years ago Raymond Tang

In this page

如果之前使用过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>

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>

最终解析的结果



Related pages

Issue - Unable to get property 'apply' of undefined or null reference occurred in Angular 4.*, VS2017 15.3, ASP.NET Core 2.0

6815 views   10 comments last modified about 2 years ago

Issue Context After installed Visual Studio 2017 15.3 preview and .net core 2.0 preview SDK, I upgraded one of my existing asp.net core project to 2.0. The project was created using ‘dotnet new angular’ SPA template.&nbsp; I also upgraded all the client app packages to the latest. For exa...

View detail

[Link] Build SPA on ASP.NET Core with JavaScript Services

455 views   0 comments last modified about 2 years ago

Great introduction about JavaScriptServices ( JavaScriptServices GitHub repository ): Microsoft.AspNetCore.SpaTemplates plugs into dotnet new , providing project templates for Angular 2, Aurelia, Knockout...

View detail

input submit input text css的写法

111 views   0 comments last modified about 10 years ago

本文介绍如何修改input控件submit以及text不同类型的样式。

View detail

JavaScript版本的杨辉三角

271 views   0 comments last modified about 9 years ago

前几天帮一个学弟写的,JavaScript版本的杨辉三角,其实和其他C、Java等等版本的都差不多。代码如下:

View detail

在网页中通过userAgent获取手机获取手机操作系统类型

1392 views   0 comments last modified about 7 years ago

本文介绍如果在JavaScript中根据手机浏览器提供的信息userAgent判断手机操作系统的类型,并执行相应的操作。

View detail

在.Net中使用msxsl:script脚本块扩展XSLT的具体实践与应用

340 views   0 comments last modified about 9 years ago

一概述XSLT可以用于将XML格式的数据转换为其它格式,在数据和展示分开以及数据相互转换中可以得到广泛的应用,比较典型的是以前的动网论坛模板系统以及动易的标签系统。掌握好XSLT可以灵活的处理XML,同时运用在Web应用程序中也非常的方便,不过缺点是使用者需要掌握大量的XPath、XSLT、XML等相关知识。

View detail

Add comment

Please login first to add comments.  Log in New user?  Register

Comments (0)

No comments yet.