关于xslt 操作xml 显示html的小例子
最近项目遇到的 整合成了一个例子
先贴xml
<?xml version='1.0' encoding='utf-8'?> <channels> <channel> <title>点击量排行</title> <link>http://news.sina.com.cn/hotnews/index.shtml</link> <description>新浪网热门新闻排行</description> <language>zh-cn</language> <category>新闻总排行</category> <item> <id>1</id> <title>北大教授接受手术时死亡 主治医生无行医资格</title> <link>http://news.sina.com.cn/c/2009-11-04/103918973423.shtml</link> <media>央视《经济半小时》</media> <date>11-04 10:39</date> </item> <item> <id>2</id> <title>冠军杯-小罗追平帕托进球被吹无效 AC米兰1-1皇马</title> <link>http://finance.sina.com.cn/g/20091104/00546919126.shtml</link> <media>新浪体育</media> <date>11-04 00:54</date> </item> <item> <id>3</id> <title>AC米兰连买三人却难补一个软肋 主力11人唯他不配首发 </title> <link>http://sports.sina.com.cn/g/2009-11-04/04364679431.shtml</link> <media>新浪体育</media> <date>11-04 04:36</date> </item>
代码就没必要全都贴上去了 大家明白那个意思就行
xsl代码：
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <table width="269" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="29" height="32" align="center"> <img src="images/logo_sina.jpg" mce_src="images/logo_sina.jpg" width="16" height="16" /> </td> <td width="174"> <table width="174" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20" valign="bottom" class="word16"> <a> <xsl:attribute name="href"> <xsl:value-of select="channels/channel/link" /> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="channels/channel/description" /> </xsl:attribute> <xsl:choose> <xsl:when test="string-length(channels/channel/description) < 18"> <xsl:value-of select="channels/channel/description"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="substring(channels/channel/description,1,18)"/>... </xsl:otherwise> </xsl:choose> </a> </td> </tr> </table> </td> </tr> <xsl:for-each select="channels/channel/item[id=1]"> <tr> <td height="26" align="center"> <img src="images/no_01.jpg" mce_src="images/no_01.jpg" width="14" height="11" /> </td> <td class="word02"> <a> <xsl:attribute name="href"> <xsl:value-of select="link" /> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="title" /> </xsl:attribute> <xsl:choose> <xsl:when test="string-length(title) < 18"> <xsl:value-of select="title"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="substring(title,1,18)"/>... </xsl:otherwise> </xsl:choose> </a> </td> </tr> </xsl:for-each> <xsl:for-each select="channels/channel/item[id=2]"> <tr> <td height="26" align="center"> <img src="images/no_02.jpg" mce_src="images/no_02.jpg" width="14" height="11" /> </td> <td class="word02"> <a> <xsl:attribute name="href"> <xsl:value-of select="link" /> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="title" /> </xsl:attribute> <xsl:choose> <xsl:when test="string-length(title) < 18"> <xsl:value-of select="title"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="substring(title,1,18)"/>... </xsl:otherwise> </xsl:choose> </a> </td> </tr> </xsl:for-each> <xsl:for-each select="channels/channel/item[id=3]"> <tr> <td height="26" align="center"> <img src="images/no_03.jpg" mce_src="images/no_03.jpg" width="14" height="11" /> </td> <td class="word02"> <a> <xsl:attribute name="href"> <xsl:value-of select="link" /> </xsl:attribute> <xsl:attribute name="title"> <xsl:value-of select="title" /> </xsl:attribute> <xsl:choose> <xsl:when test="string-length(title) < 18"> <xsl:value-of select="title"/> </xsl:when> <xsl:otherwise> <xsl:value-of select="substring(title,1,18)"/>... </xsl:otherwise> </xsl:choose> </a> </td> </tr> </xsl:for-each>
在这里给大家解释下代码的意思
<xsl:attribute name="href">
<xsl:value-of select="channels/channel/link" />
</xsl:attribute>
这是给<a>标签加上href的属性
<xsl:attribute name="title">
<xsl:value-of select="channels/channel/description" />
</xsl:attribute>
<xsl:choose>
这是给<a>标签添加title的属性 鼠标移上去的时候显示所有的文章标题
<xsl:choose>
<xsl:when test="string-length(channels/channel/description) < 18">
<xsl:value-of select="channels/channel/description"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="substring(channels/channel/description,1,18)"/>...
</xsl:otherwise>
</xsl:choose>
这是对xml文本的判断 如果文本的长度大于18就进行截取然后加上...
前台代码：
<mce:script type="text/javascript"><!-- function abc() { // Load XML var xml = new ActiveXObject("Microsoft.XMLDOM") xml.async = false xml.load("sina_hotnews_index.xml") // Load the XSL var xsl = new ActiveXObject("Microsoft.XMLDOM") xsl.async = false xsl.load("Sina_index.xsl") //document.getElementById("sinaindex").insertAdjacentHTML(("beforeEnd",xslt.output()); document.write(xml.transformNode(xsl)) } // --></mce:script>
调用：
<div id="sinaindex"> <mce:script type="text/javascript"> readXSL(); mce:script> </div>
效果如图：
参考教程：http://www.w3school.com.cn/xsl/index.asp
补充：
因为我用的是url来获取xml 而js不能跨域获取 所以后面只能改成C#来做 具体代码如下：
private void ReadXLST(System.Web.UI.HtmlControls.HtmlGenericControl contro,string xsl,string xml)//第一个参数传入的是div的名称，第二个参数传入的是xsl名称，第三个参数传入的是xml { System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument(); xmlDoc.Load(xml);//加载xml StringWriter output = new StringWriter();//定义StringWriter类 System.Xml.Xsl.XslTransform trans = new System.Xml.Xsl.XslTransform(); trans.Load(Server.MapPath(xsl)); trans.Transform(xmlDoc, null, output, null); contro.InnerHtml = output.ToString(); }
调用方法为： ReadXLST(eastweekly, "East_index.xsl", "http://192.168.9.22:9090/static/xml/eastday_hotnews_index_weekly.xml");