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

指定された種類の商品だけを表示する

JAVA Scriptを使用すると、データベースを検索して、指定された条件に該当するデータだけを表示することができます。ここでは、商品のメーカーを指定して、該当する商品をテーブルに表示する方法について考えてみましょう。

■ メニューとボタンの配置

商品のメーカーを指定するためのメニューと、テーブルの表示を更新するための実行ボタンをページに配置するように設定します。

<SELECT ID="CategoryKeyword" SIZE="1">
<OPTION VALUE="全商品" SELECTED>全商品</OPTION>
<OPTION VALUE="CANON">CANON</OPTION>
<OPTION VALUE="EPSON">EPSON</OPTION>
<OPTION VALUE="FUJITSU">FUJITSU</OPTION>
<OPTION VALUE="PANASONIC">PANASONIC</OPTION>
<OPTION VALUE="SHARP">SHARP</OPTION>
</SELECT>
<INPUT ID="ExecSearch" TYPE="button" VALUE="実行" onClick="SearchCategory()">
■ ページ読み込み時の処理

ページ読み込み時に、絞り込む前のテーブルを表示するための関数の実行を定義します。

<BODY onLoad="SearchCategory()>

■ 指定された種別の商品だけを表示する処理

「Table Data Control」オブジェクトの機能を使用して商品の種別の絞込みを行い、指定された種別の商品だけを表示するJAVA Scriptを記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
function DataSort(Col){
list.SortColumn = Col;
list.Reset();
}
function SearchCategory(){
if(CategoryKeyword.value=="全商品"){
list.FilterColumn=""
list.Reset();
}
else{
list.FilterValue=CategoryKeyword.value;
list.FilterColumn="maker"
list.FilterCriterion="=";
list.Reset();
}
}

データの絞込みを行うには、「FilterValue」プロパティ・「FilterColumn」プロパティ・「FilterCriterion」プロパティの3つを組み合わせて条件を指定します。
「FilterColumn」プロパティには絞込みの対象とする項目を指定します。この際、項目はCSVファイルの1行目に記述した項目名で指定します。
例では、全商品を表示する場合は「list.FilterColumn=""」、メーカー別で絞込みを行う場合は「list.FilterColumn="maker"」と指定しています。

<<<戻る

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