ファイルメーカーProのページへ戻る

JavaScriptで、並べ替えを動的に変化させる（３）

ソート方向を動的に

　ソートするフィールドを動的に変化させることができるようになりました。さらに、フィールドの種類がテキストなのか数値なのかによって、ソートの方法を自動的に切り替えることもできるようになりました。仕上げに、ソートの方向（昇順・降順）も動的に制御できるようにしましょう。これは、order-by属性値の先頭の１文字を「+」「-」に相互に入れ換えるスクリプトを作ることで実現できます。

function changeOrder(orderCode) {
  var keyNode = document.XSLDocument.selectSingleNode("*/xsl:template[@match='RESULTSET']//xsl:apply-templates[@select='ROW']/@order-by");
  if(orderCode == "-"){
    keyNode.value = keyNode.value.replace("+", "-");
  }
  else{
    keyNode.value = keyNode.value.replace("-", "+");
  }
  var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
  content.innerHTML = d.transformNode(document.XSLDocument);
}

１行目：

　changeOrder( )という関数を定義しました。関数の実行時に、昇順にするのか降順にするのかを決める文字（orderCode）を一つ受け取ることにしています。

２行目：

　並び順を定義しているorder-by属性値を取り出します。document.XSLDocument.selectSingleNode( )は「現在の文書中の.XSL文書中の.とある一つの要素」という意味です。「とある一つの要素」とは具体的には( )内のマッチパターンに該当する要素です。マッチパターン*/xsl:template[@match='RESULTSET']//xsl:apply-templates[@select='ROW']/@order-byは「どこから始めてもいい -> その子要素で[match属性値がRESULTSETである]xsl:template要素 -> その子孫要素で[select属性値がROWである]xsl:apply-templates要素 -> そのorder-by属性値」という意味で、この条件にマッチするのは現在のXSL文書中には一カ所しかありません。これによって、左辺のkeyNodeという変数に、「order-by="+COL[0]/DATA"」が代入されます。

３行目：

　関数実行時に一緒に渡される値（この例ではorderCodeという名前）によって処理を振り分ける。ここでは「+」または「-」のいずれかが渡されることにしています。orderCodeが「-」の場合は、降順に、「+」の場合は、昇順に切り替える処理を実行します。if(orderCodeが「-」){だった場合、降順に切り替える}else{そうじゃなかった場合、昇順に切り替える}

４行目：

　keyNodeの値（+COL[0]/DATA）の中にある「+」という文字を「-」に置換する処理を実行しています。これで、order-by属性値のソート方向を切り替えることができます。

９、１０行目：

　XSLの変更結果を再度適用し直すためのコード。この２行は、XSLを書きかえるスクリプトでは必ずといっていいほど使います。この２行を書かないと、いくらXSLを書きかえても、その結果が画面に反映されません。

　これで、changeOrder("-")を実行すると、order-by属性値の「+」が「-」に置換されて、ソートが降順になります。changeOrder("+")を実行すれば、order-by属性値の「-」が「+」に置換されて、ソートが昇順になります。では、ブラウザのウインドウ上にこの関数を呼び出すための仕掛けを組み込んでおきましょう。

<a href="javascript:changeOrder('-')">↑</a>

　画面上の「↑」をクリックするとchangeOrder('-')が実行されて、order-by属性値が降順に切り替わります。さて、降順に切り替えた後は、昇順に切り替えられるようにしなければなりません。関数実行時に