通过向xsl传递参数+数据岛方式,实现在客户端单个xml的分框架显示。
对于数据较少的xml数据,可以使用一次下载完所有数据,将显示全部放到客户端完成,下面例子中,将一个xml文件显示为左右两个框架,左边显示条目,右边显示内容。可以在本地,不用通过服务器解释.
关键:使用msxml的dom对象向xsl模板传递参数
环境: IE6 + Msxml3.0
examples:
/*** book.xml ***/
<?xml version=\"1.0\" encoding=\"gb2312\" ?>
<?xml-stylesheet type=\"text/xsl\" href=\"book.xsl\"?>
<moonpiazza>
<book ID=\"1\">
<书名>基于XML 的 ASP.NET开发</书名>
<定价>42</定价>
<作者>Dan Wahlin/王宝良</作者>
</book>
<book ID=\"2\">
<书名>XML应用的UML建模技术</书名>
<定价>32</定价>
<作者>David Carlson/周靖 侯奕萌 沈金河等</作者>
</book>
<book ID=\"3\">
<书名>极限编程研究</书名>
<定价>70</定价>
<作者>Giancarrio Succi/Michele Marchesi/张辉(译)</作者>
</book>
<book ID=\"4\">
<书名>Design Patterns</书名>
<定价>38</定价>
<作者>Erich Gamma/Richard Helm/Ralph Johnson/John Vlissides</作者>
</book>
</moonpiazza>
/*** book.xsl ***/
<?xml version=\"1.0\" encoding=\"gb2312\"?>
<xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\">
<xsl:template match=\"/\">
<html>
<head>
<SCRIPT LANGUAGE=\"JavaScript\">
<xsl:comment>
<![CDATA[
var m_oXSL ;
var m_sFrameAttr_left, m_sFrameAttr_main ;
var m_sXMLFile, m_sXSLTFile ;
m_sXMLFile = \"\" ;
m_sXSLTFile = \"book_view.xsl\"; // 指定xsl文件
function window.onload()
{
var oXSLDoc ;
m_sFrameName_left = \"left_frame\";
m_sFrameName_main = \"main_frame\";
m_oXSL = new ActiveXObject(\"MSXML2.XSLTemplate.3.0\");
oXSLDoc = new ActiveXObject(\"MSXML2.FreeThreadedDOMDocument.3.0\");
oXSLDoc.async = false;
oXSLDoc.load(m_sXSLTFile);
m_oXSL.stylesheet= oXSLDoc;
initPage() ;
}
function initPage()
{
content.cols = \"270,*\" ;
viewFrame(m_sFrameName_left);
var sHtmlStr = \"请选择书目...\";
eval(m_sFrameName_main + \".document\").open (\"text/html\",\"gb2312\");
eval(m_sFrameName_main + \".document\").write(sHtmlStr) ;
}
function viewFrame(p_sFrameName)
{
var oXSLProc;
var sHtmlStr;
oXSLProc = m_oXSL.createProcessor();
oXSLProc.input = xmlData;
// 指定参数,显示左(或右)框架
oXSLProc.addParameter(\"frameName_left\", m_sFrameName_left);
oXSLProc.addParameter(\"frameName_main\", m_sFrameName_main);
oXSLProc.addParameter(\"frameName\", p_sFrameName);
oXSLProc.transform();
sHtmlStr = oXSLProc.output ; // 获得转化后的字符串
eval(p_sFrameName + \".document\").open (\"text/html\",\"gb2312\");
eval(p_sFrameName + \".document\").write(sHtmlStr) ;
}
function viewData(p_sDataID)
{
var oXSLProc;
var sHtmlStr;
oXSLProc = m_oXSL.createProcessor();
oXSLProc.input = xmlData;
// 指定参数,显示id为 p_sDataID 的数据
oXSLProc.addParameter(\"frameName_left\", m_sFrameName_left);
oXSLProc.addParameter(\"frameName_main\", m_sFrameName_main);
oXSLProc.addParameter(\"frameName\", m_sFrameName_main);
oXSLProc.addParameter(\"DataID\", p_sDataID);
oXSLProc.transform();
sHtmlStr = oXSLProc.output ; // 获得转化后的字符串
eval(m_sFrameName_main + \".document\").open (\"text/html\",\"gb2312\");
eval(m_sFrameName_main + \".document\").write(sHtmlStr) ;
}
]]>
</xsl:comment>
</SCRIPT>
</head>
<xml id=\"xmlData\">
<xsl:copy-of select=\"*\" />
</xml>
<frameset cols=\"0,*\" name=\"content\">
<frame name=\"left_frame\" src=\"about:blank\" />
<frame name=\"main_frame\" src=\"about:blank\" />
</frameset>
</html>
</xsl:template>
</xsl:stylesheet>
/*** book_view.xsl ***/
<?xml version=\"1.0\" encoding=\"gb2312\"?>
<xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\">
<xsl:param name=\"frameName_left\" select=\"\'left_frame_null\'\" />
<xsl:param name=\"frameName_main\" select=\"\'main_frame_null\'\" />
<xsl:param name=\"frameName\" select=\"\'\'\" />
<xsl:param name=\"DataID\" select=\"\'\'\" />
<xsl:template match=\"/\">
<html>
<head>
<style type=\"text/css\">
body
{
font-size:9pt;
}
td
{
font-size:9pt;
}
a{
font-size:9pt;
}
</style>
</head>
<xsl:choose>
<xsl:when test=\"$frameName = $frameName_left\">
<xsl:call-template name=\"left_frame\" />
</xsl:when>
<xsl:when test=\"$frameName = $frameName_main\">
<xsl:call-template name=\"main_frame\" />
</xsl:when>
</xsl:choose>
</html>
</xsl:template>
<xsl:template name=\"left_frame\">
<xsl:for-each select=\"moonpiazza/book\">
<xsl:element name=\"a\">
<xsl:attribute name=\"href\">
javascript:parent.viewData(<xsl:value-of select=\"@ID\" />);
</xsl:attribute>
<xsl:value-of select=\"书名\" />
</xsl:element>
<br/>
</xsl:for-each>
</xsl:template>
<xsl:template name=\"main_frame\">
<xsl:choose>
<xsl:when test=\"$DataID != \'\'\">
<table border=\"1\" width=\"500\">
<xsl:for-each select=\"moonpiazza/book[@ID = $DataID]/*\">
<tr>
<td width=\"70\"><xsl:value-of select=\"name()\" /></td>
<td><xsl:value-of select=\".\" /></td>
</tr>
</xsl:for-each>
</table>
</xsl:when>
</xsl:choose>
</xsl:template>
</xsl:stylesheet> |