ファイルメーカーProのページへ戻る
JavaScriptで、表示範囲を動的に変化させる（ステップ）
<xsl:if expr="getpos(1)">を動的に変化させる
１〜５件目までを表示するXSLができました。前項のXSLにおいてif(pos >= spos && pos <= epos)の部分が、表示範囲を決定する重要な部分であることがわかります。sposやeposは、getpos( )関数を呼び出すときの引数によって決まるので、この数字を書き変えれば、表示範囲も変化するはずです。
| <xsl:if expr="getpos(1)">を書き変えるJavaScript |
|---|
function gonextp(spos) {
var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='ROW']/xsl:if/@expr");
key.value = "getpos(" + spos + ")";
var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
content.innerHTML = d.transformNode(document.XSLDocument);
}
|
- １行目：
- getpos(1)を書き変えるためのgonextp( )関数を定義します。
- ２行目：
-
document.XSLDocument.selectSingleNodeは、「現在の文書中の.XSL文書中の.とある１要素」を取り出す命令。「とある１要素」は、その後ろのパターンマッチングで定義されていて、「match属性が'ROW'であるxsl:template要素の子要素のxsl:if要素のexpr属性」に該当する部分、つまりexpr="getpos(1)"です。これが、keyという変数に代入されます。
- ３行目：
-
expr="getpos(1)"を書き変える命令です。gonextp( )関数の実行時に一緒に渡される数値sposを使って、新しいexpr属性値を作って、それをkeyの値と置き換えています。たとえば、gonextp(6)が実行されれば、sposは6なので、expr="getpos(1)"はexpr="getpos(6)"に書き変えられます。
- ４〜５行目：
- expr属性値を書き換えた結果を、画面に反映するために、XMLデータのRESULTSET要素以下の部分を取り出して、XSL変換を適用し直します。変換し直した結果は、id="content"で指定された範囲に埋め込まれます。
画面上のボタンをクリックしてgoneto(6)が実行されるようにすれば、XSLのexpr="getpos(1)"はexpr="getpos(6)"に書き変えられます。すると、検索結果の表示が１〜５件目から６〜10件目に置き換わるはずです。
では、XSLを次のように書き直してテストしてみましょう。
| 動的範囲指定のXSLファイル |
<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:fm="http://www.filemaker.com/fmpdsoresult" xml:lang="ja">
<xsl:template><xsl:apply-templates /></xsl:template>
<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>
<xsl:script language="javascript">
<![CDATA[
pos = 0;
function getpos(spos){
epos = spos + 4;
pos = pos + 1;
if(pos >= spos && pos <= epos){
return true;
}else{
return false;
}
}
]]>
</xsl:script>
<xsl:template match="FMPXMLRESULT">
<html>
<head><title>検索結果</title>
<script language="javascript">
<xsl:comment><![CDATA[
function gonextp(spos) {
var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='ROW']/xsl:if/@expr");
key.value = "getpos(" + spos + ")";
var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
content.innerHTML = d.transformNode(document.XSLDocument);
}
function sort(sortfld) {
sortfld = sortfld - 1;
var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='RESULTSET']//xsl:apply-templates[@select='ROW']/@order-by");
key.value = "COL[" + sortfld + "]/DATA";
var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
content.innerHTML = d.transformNode(document.XSLDocument);
}
]]></xsl:comment>
</script>
</head>
<body>
<span id="content"><xsl:apply-templates select="RESULTSET" /></span>
<p><a id="nextp" href="javascript:gonextp(6)">nextPage</a></p>
</body>
</html>
</xsl:template>
<xsl:template match="RESULTSET">
<table border="1">
<tr>
<th><a href="javascript:sort(0)">name</a></th>
<th><a href="javascript:sort(1)">os</a></th>
<th><a href="javascript:sort(2)">price</a></th>
<th><a href="javascript:sort(3)">color</a></th>
</tr>
<xsl:apply-templates select="ROW" order-by="COL[0]/DATA" />
</table>
</xsl:template>
<xsl:template match="ROW">
<xsl:if expr="getpos(1)">
<tr><xsl:apply-templates select="COL" /></tr>
</xsl:if>
</xsl:template>
<xsl:template match="COL">
<td><xsl:value-of select="DATA" /></td>
</xsl:template>
</xsl:stylesheet>
|
画面上の「nextPage」をクリックすると、javascriptによってXSLが書き変わって、表示範囲が変わります。
expr="getpos(1)"がexpr="getpos(6)"に変わるだけじゃダメだ
画面上の「nextPage」をクリックするとexpr="getpos(1)"がexpr="getpos(6)"に書き変わりますが、それだけで、以後はこれを何回クリックしてもexpr="getpos(6)"はexpr="getpos(6)"に書き変えられるだけで何も変わりません。nextPageをクリックするたびに５件ずつ表示範囲をずらしていくためにはどうしたらいいでしょう。
XSLを書き変えるついでに、次の書き変えに備えてhref="javascript:gonextp(6)"も書き変えるようにスクリプトを改造しましょう。
| ついでにnextPageも書き変えるJavaScript |
|---|
function gonextp(spos) {
var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='ROW']/xsl:if/@expr");
key.value = "getpos(" + spos + ")";
var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
content.innerHTML = d.transformNode(document.XSLDocument);
spos = spos + 5;
nextp.href = "javascript:gonextp(" + spos + ")";
}
|
最後に追加した２行がポイントです。関数実行時に渡されたsposの数値に５を足して、新しい「nextPage」ボタンを作っています。nextp.hrefは「id="nextp"である要素のhref属性」という意味です。これでjavascript:gonextp( )の数値がクリックするたびに５ずつ増えてくれます。＞＞