XML通过XSL格式化的那点事(XML到自定义节点折叠显示)
引言
有时我们想看下系统生成的XML文件(如XML格式的Project文件),如果文件结构简单,我们浏览器看起来还比较方便,但是随着XML schema复杂后就变得让人头疼啦,单独写一个程序去做展现又有点小题大做。这时XSL就用体现它的价值啦,当然XSL不只是为了显示,更多的目的是从一个格式生成另个一格式的XML或者其他格式的文件。本文只说说格式化。
过程中遇到的问题解决方法
效果图
XSL常用元素
xsl:template定义匹配节点的转换模板,属性match=”xpath expression”用来定义模板匹配的元素
如下定义匹配根节点的模板
<xsl:template match=”/”> </xsl:template>
xsl:for-each循环显示select=”xpath expression”选择节点的转换 (类似编程语言中的foreach语句),
如下示例,选择了pets下面的子元素,并循环显示子元素的几点名字:
<xsl:for-each select=”/pets/*”> <xsl:value-of select=”name()”/> </xsl:for-each>
xsl:if 元素条件显示节点(类似编程语言中的if语句)注意小于号大于号要分别用<和>替代
<xsl:if test=”@weight < 10”> <i>its weight is less than 10 km</i> </xsl:if>
xsl:choose 多分支条件显示 (类似编程语言中的switch语句)
<xsl:choose > <xsl:when test=”name() = ‘pig’”> <i>this is a pig</i> </xsl:when> <xsl:otherwise> <i>this is not a pig</i> </xsl:otherwise> </xsl:choose>
xsl:value-of 显示选择节点或者属性的值
选择子节点price
<xsl:value-of select=”pets/*/price”/>
选择属性weight
<xsl:value-of select=”pets/*/@weight”/>
xsl:attribute 构造xml节点的属性
用来向节点添加属性,例如:
<font> <xsl:attribute name=”color”><xsl:value-of select=”pets/*/@color”/></xsl:attribute> </font>
将输出<font color=”red”></font>
xsl:apply-templates 应用模板
如果xml文件结构比较复杂,可以定义多个template,然后使用<xsl:apply-templates>标签应用模板,xsl:apply-templates 可以指定属性select=”xpath”来选择应用的模板,或者不指定select表示选择当前节点的模板。
XSL所有元素
元素 | 描述 | IE | N |
---|---|---|---|
apply-imports | 应用来自导入样式表中的模版规则。 | 6.0 | |
apply-templates | 向当前元素或当前元素的子元素应用模板。 | 5.0 | 6.0 |
attribute | 向元素添加属性。 | 5.0 | 6.0 |
attribute-set | 创建命名的属性集。 | 6.0 | 6.0 |
call-template | 调用一个指定的模板。 | 6.0 | 6.0 |
choose | 与<when>以及<otherwise>协同使用,来表达多重条件测试。 | 5.0 | 6.0 |
comment | 在结果树中创建注释节点。 | 5.0 | 6.0 |
copy | 创建当前节点的一个备份(无子节点及属性)。 | 5.0 | 6.0 |
copy-of | 创建当前节点的一个备份(带有子节点及属性)。 | 6.0 | 6.0 |
decimal-format | 定义当通过 format-number() 函数把数字转换为字符串时,所要使用的字符和符号。 | 6.0 | |
element | 在输出文档中创建一个元素节点。 | 5.0 | 6.0 |
fallback | 假如处理器不支持某个XSLT元素,规定一段备用代码来运行。 | 6.0 | |
for-each | 遍历指定的节点集中的每个节点。 | 5.0 | 6.0 |
if | 包含一个模板,仅当某个指定的条件成立时应用此模板。 | 5.0 | 6.0 |
import | 用于把一个样式表中的内容倒入另一个样式表中。 | 6.0 | 6.0 |
include | 把一个样式表中的内容包含到另一个样式表中。 | 6.0 | 6.0 |
key | 声明一个命名的键。 | 6.0 | 6.0 |
message | 向输出写一条消息(用于错误报告)。 | 6.0 | 6.0 |
namespace-alias | 把样式表中的命名空间替换为输出中不同的命名空间。 | 6.0 | |
number | 测定当前节点的整数位置,并对数字进行格式化。 | 6.0 | 6.0 |
otherwise | 规定 <choose> 元素的默认动作。 | 5.0 | 6.0 |
output | 定义输出文档的格式。 | 6.0 | 6.0 |
param | 声明一个局部或全局参数。 | 6.0 | 6.0 |
preserve-space | 用于定义保留空白的元素。 | 6.0 | 6.0 |
processing-instruction | 生成处理指令节点。 | 5.0 | 6.0 |
sort | 对结果进行排序。 | 6.0 | 6.0 |
strip-space | 定义应当删除空白字符的元素。 | 6.0 | 6.0 |
stylesheet | 定义样式表的根元素。 | 5.0 | 6.0 |
template | 当指定的节点被匹配时所应用的规则。 | 5.0 | 6.0 |
text | 通过样式表生成文本节点。 | 5.0 | 6.0 |
transform | 定义样式表的根元素。 | 6.0 | 6.0 |
value-of | 提取选定节点的值。 | 5.0 | 6.0 |
variable | 声明局部或者全局的变量。 | 6.0 | 6.0 |
when | 规定 <choose> 元素的动作。 | 5.0 | 6.0 |
with-param | 规定需被传入某个模板的参数的值。 | 6.0 | 6.0 |
XSL引入方式
IE浏览器支持直接在XML中直接引入XSL文件
<?xml-stylesheet type="text/xsl" href="icoreNested.xsl"?>
Chorme浏览器不能直接加载本地XSL文件
参考Can Chrome be made to perform an XSL transform on a local file
<html> <head> <script> function loadXMLDoc(filename) { var progressBar = document.getElementById("p"); if (window.ActiveXObject) { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xhttp = new XMLHttpRequest(); } xhttp.open("GET", filename, false);//Synchronous loadXMLDoc try { xhttp.onprogress = function(pe) { if(pe.lengthComputable) { progressBar.max = pe.total progressBar.value = pe.loaded } } xhttp.onloadend = function(pe) { progressBar.value = pe.loaded } } catch(err) {} // Helping IE11 xhttp.send(); return xhttp.responseXML; } function displayResult() { xml = loadXMLDoc("cdcatalog.xml"); xsl = loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject || xhttp.responseType == "msxml-document") { ex = xml.transformNode(xsl); document.getElementById("example").innerHTML = ex; } // code for Chrome, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml, document); document.getElementById("example").appendChild(resultDocument); } } </script> </head> <body onload="displayResult()"> <h2>Content as Follow:</h2> <progress id=p style="width=100%"></progress> <div id="example" /> </body> </html>
源码
参考
Can Chrome be made to perform an XSL transform on a local file?
作者:旭东
出处:http://www.cnblogs.com/HQFZ
关于作者:专注于微软平台项目架构、管理和企业解决方案。现主要从事WinForm、ASP.NET、WPF、WCF、等方面的项目开发、架构、管理。如有问题或建议,请不吝指教!
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。如有问题,可以联系我,非常感谢。
如果您该文觉得不错或者对你有帮助,请点下推荐,让更多的朋友看到,谢谢!