Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

項目を数値順に並べて表示する

JAVA Scriptを使用すると、データベースから読み込んで表示したテーブルの各行を、特定の列に含まれる数値の大きさの順に並べ替えることができます。ここでは、商品の販売価格の安い順や定価の高い順に並べ替えて表示する方法について考えてみましょう。

■ データ種別の設定

データベースとして使用するCSVファイルで、データ種別の設定を行います。

文字列ではなく、数値として使用する項目は、1行目の項目名が記述されている部分に、整数型のデータ種別を指定します。
■ データ種別について

数値が入力されている列に、通常の方法で並べ替えを行うと不都合が生じます。例えば「111」と「9」という2つの数値が含まれている場合、並べ替えを行うと「111」の方が先に並べられてしまいます。これはデータが文字列として扱われるため、「1」の方が「9」より文字コードが小さいためです。このような不都合を防ぐために、データベースファイルの1行目で、数値データの場合は整数型を指定します。

項目のデータ種別は、データベースファイルの1行目で、項目名のあとに「:」に続けて記述します。指定できるデータ種別には、表のような種類があります。データ種別を何も指定していない場合は「String」(文字列型)を指定したことになります。

データ種別

指定のための記述

文字列型
String
日付型
Date
論理型
Boolian
整数型
Int
不動小数点型
Float

■ 並べ替えボタンの配置

「カタログページに、並べ替えを行うためのボタンを配置します。

<INPUT ID="SortNo" TYPE="button" VALUE="番号順" onMouseDown="DataSort('no')">
<INPUT ID="SortTeika" TYPE="button" VALUE="定価順" onMouseDown="DataSort('-teika')">
<INPUT ID="Sortkakaku" TYPE="button" VALUE="特価順" onMouseDown="DataSort('tokka')">

onMouseDownの値として、並べ替えを行うためのJAVA Scriptを呼び出して、並べ替えをい行う際に基準とする項目を()内で指定します。例では「番号順」「定価順」「特価順」の3種類のボタンを配置しています。

データの並び替えは、項目によって数値の小さな順にデータを表示するよりも、数値の大きな順で表示した方が都合の良い場合があります。「SortColumn」プロパティで並べ替えを行う項目を指定する際に「-」をつけて指定すると、数値の大きな順に並べ替えを行うことができます。例では「定価順」ボタンでは数値の大きな順に並べ替えています。

■ 並べ替えの処理

並べ替えを行うためのJAVA Scriptを記述します。テーブルの各行を、指定された項目で値の大きい順に並べ替えます。

SCRIPT LANGUAGE="JavaScript">
<!--
function DataSort(Col){
list.SortColumn = Col;
list.Reset();
}
//-->
</SCRIPT>

TDC(Tabel Data Control)で「Filter」や「Sort」関連のメソッドを使用する場合は、「Reset」メソッドで表示を更新する必要があります。「Filter」や「Sort」のメソッドを記述するだけでは、テーブルの表示は更新されないので注意が必要です。

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box