1

我有 1 个包含我需要的所有数据的大 XML 文件。

我需要的是这样的：1 页 = 概述。在此页面上显示了一个表格。每行都以指向详细信息页面的超链接开始。

我正在寻找一种仅使用 XML、XSLT 和 HTML 的方法。没有服务器端处理。

有什么办法可以做到这一点？

现在 XML 具有 XSLT 用于在标题中指定的概述：

<?xml-stylesheet type="text/xsl" href="overview.xslt"?>

如果我不能对多个 XSLT 文件执行此操作，有没有办法从 XSLT 中的 url 读取查询字符串？

4

1 回答 1

2

我看到两个选项：

  1. 让 XSLT 创建一个大 HTML 并隐藏除您想要显示的部分之外的所有部分。
  2. 使用 JavaScript 启动不同的转换，将当前 HTML 的正文替换为转换返回的 HTML 正文。<xsl:parameter>您可以使用一个样式表，该样式表根据需要为每个转换提供的 a 的值采用不同的路径，或者您使用不同的样式表。

假设您有以下 XML（我们称之为text.xml）：

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>
<myXml>
  <chapter id="c1">
    <heading>Heading 1</heading>
    <content>This is text of chapter one.</content>
  </chapter>
  <chapter id="c2">
    <heading>Heading 2</heading>
    <content>This is text of chapter two.</content>
  </chapter>
</myXml>

然后，对于建议 1，您可以执行以下操作：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/>

  <xsl:template match="/">
    <html>
      <head>
        <title></title>
        <script type="text/javascript">
          function showView(id) {
            document.getElementById("dynamicStyle").innerHTML = "#" + id + "{display:inline}";
          }
        </script>
        <style type="text/css">
          .view {display:none};
        </style>
        <style type="text/css" id="dynamicStyle">
          #overview{display:inline}
        </style>
      </head>
      <body>
        <div class="view overview" id="overview">
          <h1>Overview</h1>
          <xsl:apply-templates select="myXml/chapter" mode="overview"/>
        </div>
        <xsl:apply-templates select="myXml/chapter" mode="detail"/>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="chapter" mode="overview">
    <div><a href="javascript:showView('{@id}')"><xsl:value-of select="heading"/></a></div>
  </xsl:template>

  <xsl:template match="chapter" mode="detail">
    <div class="view detail" id="{@id}">
      <div><a href="javascript:showView('overview')">Back to overview</a></div>
      <xsl:apply-templates mode="detail"/>
    </div>
  </xsl:template>

  <xsl:template match="heading" mode="detail">
    <h1><xsl:value-of select="."/></h1>
  </xsl:template>

  <xsl:template match="content" mode="detail">
    <div><xsl:value-of select="."/></div>
  </xsl:template>
</xsl:stylesheet>

关键是为每个视图创建单独的 div，并通过让 JavaScript 更改 CSS 在它们之间切换。

方法 2 可能如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html"/>

  <xsl:param name="view" select="'overview'"/>

  <xsl:template match="/">
    <html>
      <head>
        <title></title>
        <script type="text/javascript">
          function showView(id) {
            document.documentElement.replaceChild(transform(id).body, document.body);
          }
          function loadXML(fileName,mime) {
            var xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("GET",fileName,false);
            if(mime) xmlHttpRequest.overrideMimeType(mime);
            xmlHttpRequest.send("");
            return xmlHttpRequest.responseXML;
          }
          function transform(view) {
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(loadXML('test.xsl','application/xslt+xml'));
            xsltProcessor.setParameter(null,'view',view);
            return xsltProcessor.transformToDocument(loadXML('test.xml'),document);
          }
        </script>
      </head>
      <body>
        <xsl:choose>
          <xsl:when test="$view = 'overview'">
            <div>
              <h1>Overview</h1>
              <xsl:apply-templates select="myXml/chapter" mode="overview"/>
            </div>
          </xsl:when>
          <xsl:otherwise>
            <xsl:apply-templates select="myXml/chapter[@id = $view]" mode="detail"/>
          </xsl:otherwise>
        </xsl:choose>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="chapter" mode="overview">
    <div><a href="javascript:showView('{@id}')"><xsl:value-of select="heading"/></a></div>
  </xsl:template>

  <xsl:template match="chapter" mode="detail">
    <div>
      <div><a href="javascript:showView('overview')">Back to overview</a></div>
      <xsl:apply-templates mode="detail"/>
    </div>
  </xsl:template>

  <xsl:template match="heading" mode="detail">
    <h1><xsl:value-of select="."/></h1>
  </xsl:template>

  <xsl:template match="content" mode="detail">
    <div><xsl:value-of select="."/></div>
  </xsl:template>
</xsl:stylesheet>

这里的关键是使用 JavaScript 加载样式表和 XML，并使用 JavaScript 对象XSLTProcessor进行转换，然后替换文档的正文。在此示例中，我使用了一个具有不同参数的样式表，但您也可以加载不同的样式表。您必须transform()相应地调整函数，替换test.xsl为需要以某种方式提供的变量。

于 2013-01-16T19:33:26.277 回答