1

必要なすべてのデータを含む1つの大きなXMLファイルがあります。

必要なのは次のようなものです：1ページ=概要。このページには表が示されています。各行は、詳細ページへのハイパーリンクで始まります。

XML、XSLT、HTMLのみでそれを行う方法を探しています。サーバー側の処理はありません。

これを達成する方法はありますか？

現在、XMLには、ヘッダーで指定された概要に使用するXSLTがあります。

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

複数のXSLTファイルでそれを行うことができない場合、XSLTのURLからクエリ文字列を読み取る方法はありますか？

4

1 に答える 1

2

2つのオプションがあります。

  1. XSLTに1つの大きなHTMLを作成させ、表示したいセクションを除くすべてのセクションを非表示にします。
  2. JavaScriptを使用してさまざまな変換を開始し、現在のHTMLの本文を変換によって返されたHTMLの本文に置き換えます。<xsl:parameter>変換ごとに提供する必要のあるの値に応じて異なるルートをとる1つのスタイルシートを使用するか、異なるスタイルシートを使用することができます。

次の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を使用して変換を実行してから、ドキュメントの本文を置き換えることです。この例では、異なるパラメーターを持つ1つのスタイルシートを使用していますが、異なるスタイルシートをロードすることもできます。それに応じて関数を調整し、何らかの方法で指定する必要のある変数transform()に置き換える必要があります。test.xsl

于 2013-01-16T19:33:26.277 に答える