XML SchemaでXML文書の妥当性を検証する：XMLテクニック集（8）（2/3 ページ）

[山田祥寛，＠IT]

DOMで動的な表のソーティング処理を行う

DOMプログラミングを使って、コンボボックスから取得したソートキーで動的にリストのソートを行うテクニックを紹介します。ソート自体の処理はXSLTの機能を使います。DOM＋XSLT＋JavaScriptの処理となります。

	カテゴリ	DOM、JavaScript
	関連要素	<xsl:sort>
	関連記事	XML文書からソーティングされた一覧表を作成する

　XMLフォーマットを採用する理由の1つに、データとレイアウトが分離しているので「データの多角的な利用が容易である」という点が挙げられます。

　例えば、本稿で取り上げるデータのソートが代表的な例です。従来、HTMLでソート機能を実現するには、面倒なDynamic HTMLの記述を必要としました。しかし、XSLTはデフォルトでソート機能を持っています。DOMから動的にソートキーの部分だけ入れ替えてやることで、ダイナミックなソーティングをクライアント上で実現できます。

　本稿では、別稿「よく使う属性値をまとめて定義する」で使用したarticle.xslを改良して、「公開日」「タイトル」「ステータス」でソートキーを自由に切り替えられるようにしてみます。画面上部のコンボボックスからソートキーを変更すると、変更されたキーに基づいてリストの並び（昇順）がダイナミックに切り替わります。なお、元となるXML文書は「よく使う属性値をまとめて定義する」で使用したarticle.xmlをそのまま使用するものとします。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

図　コンボボックスの指定に従って、ソート順が切り替わる

　ポイントとなるのは、JavaScriptで記述された以下の部分です。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　XMLDocument、XSLDocumentメソッドは、それぞれ現在の表示ドキュメントで使用されているXML文書とXSLTスタイルシートをDOMDocumentオブジェクトとして返します。ここで取得したDOMDocumentオブジェクトを介して、XML文書、XSLTスタイルシートへのアクセスが可能となります。JavaScriptでXML、XSLTを操作する場合の定石的な手段でもありますので、覚えておくとよいでしょう。

　DOMDocument.selectSingleNodeメソッドは、引数として与えられたXPath式に合致する最初のノードを返します。この場合、XSLTスタイルシートarticle.xsl内の<xsl:sort>要素を抽出します。

　<xsl:sort>要素を取得してしまえば、あとはsetAttributeメソッドでselect属性にソートキーをセットするだけです。変数keyには、コンボボックスの内容が変更されたタイミング（onchangeイベント）で、オプション値がセットされます。

　編集が完了したXSLTスタイルシートをXML文書に再適用するのは、transformNodeメソッドの役割です。transformNodeメソッドの戻り値として返された結果文字列を、innerHTMLプロパティで<div id="sortList">要素の個所に埋め込めば完了です。

　なお、本サンプルではソートキーのみを動的に変更していますが、もちろん、order（昇順／降順）、data-type（データ型）を操作する場合もまったく同じ要領で可能です。コードはやや冗長になりますが、余力のある方は挑戦してみるとよいでしょう。