关于xslt 操作xml 显示html的小例子

最新推荐文章于 2022-03-31 10:07:50 发布

jiangyu912

最新推荐文章于 2022-03-31 10:07:50 发布

阅读量1k

点赞数

文章标签： xml xslt html xsl stylesheet class

本文链接：https://blog.youkuaiyun.com/jiangyu912/article/details/4772674

版权

最近项目遇到的整合成了一个例子

先贴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"></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");