sample_source

http://www.makoto3.net/document/databind/databind_...
http://beginners.atompro.net/htm/expcgi.shtml

1

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<BUTTON onclick="carData.Sort='+price';carData.Reset();">価格昇順</BUTTON>
<BUTTON onclick="carData.Sort='-price';carData.Reset();">価格降順</BUTTON>
<BUTTON onclick="carData.Sort='';carData.Reset();">RESET</BUTTON>

<TABLE DATASRC="#carData" BORDER=1 STYLE="font-size:9pt;">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>


<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

<価格昇順>ボタンなら価格の安い方から高い方に並び替えられ、<価格降順>ならその逆になる。< RESET>ボタンをクリックすれば、初期状態、つまり並び替える前の状態に戻る。各ボタンで実行しているスクリプトを次に抜き出してみよう。いずれも、とてもシンプルだ(ソース中ではonclick=に続けて1行で書いてあるので、以下では複数行に分けている)。

<価格昇順>ボタン

carData.Sort="+price"
carData.Reset()

<価格降順>ボタン

carData.Sort="-price"
carData.Reset()

<RESET>ボタン

carData.Sort=""
carData.Reset()

2

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function sortRecord() {

var condition = form1.sort_order.value + form1.sort_field.value carData.Sort = condition carData.Reset()

}
</SCRIPT>
</HEAD>
<BODY>

<FORM ID="form1">
<SELECT ID="sort_field" onchange="sortRecord()">
<OPTION SELECTED VALUE="name">車名
<OPTION VALUE="maker">メーカー
<OPTION VALUE="color">色
<OPTION VALUE="year">生産年
<OPTION VALUE="price">価格
</SELECT>
<SELECT ID="sort_order" onchange="sortRecord()">
<OPTION SELECTED VALUE="+">昇順
<OPTION VALUE="-">降順
</SELECT>
<INPUT TYPE="button" VALUE="RESET" onclick="carData.Sort='';carData.Reset()">
</FORM>

<TABLE DATASRC="#carData" BORDER=1 STYLE="font-size:9pt;">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>


<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

左のリストで項目を選び、右のリストで昇順/降順を指定すれば、即座にレコードが並び替えられる。<RESET>ボタンは、先のサンプルと同じだ。

リストには<SELECT>タグを使っている。<SELECT>タグについては省略するので、分からない方はHTMLの書籍等で調べてほしい。ポイントになる記述だけを簡略化して抜き出すと、次のようになる。

<FORM ID="form1">
<SELECT ID="sort_field" onchange="sortRecord()">

:

</SELECT>
<SELECT ID="sort_order" onchange="sortRecord()">

:

</SELECT>
</FORM>

まず、<FORM>のIDを｢form1｣とし、その内側にある2つの<SELECT>のIDを｢sort_field｣、｢sort_order｣としている。そして、2つの<SELECT>タグでは、onchange= "sortRecord()" として、選択された値が変わったときにsortRecord()関数を実行するようにしてある。IDの指定は、このsortRecord()関数で重要な役割を演じる。sortRecord()関数の定義は次のとおりだ。

function sortRecord() {

var condition = form1.sort_order.value + form1.sort_field.value carData.Sort = condition carData.Reset()

}

3

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

<BUTTON onclick="carData.object.Filter='color=白';carData.Reset();">白い車</BUTTON>
<BUTTON onclick="carData.object.Filter='price<=1000000';carData.Reset();">100万以下の車</BUTTON>
<BUTTON onclick="carData.object.Filter='color=白&price<=1000000';carData.Reset();">白で100万以下の車</BUTTON>
<BUTTON onclick="carData.object.Filter='';carData.Reset();">RESET</BUTTON>

<TABLE DATASRC="#carData" BORDER=1 STYLE="font-size:9pt;">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>


<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car.txt">
<PARAM NAME="UseHeader" VALUE="true">
<PARAM NAME="TextQualifier" VALUE="">
</OBJECT>
</BODY>
</HTML>

ページ中のボタンに表示される文字のとおり、<白い車>ボタンをクリックすれば｢色｣が｢白｣のレコードだけに絞り込まれ、< 100万以下の車>ボタンなら、｢価格｣が｢1000000｣以下のレコードだけが絞り込まれ、<白い車で100万以下の車>ボタンなら、｢色｣が｢白｣かつ｢価格｣が｢1000000｣以下のレコードだけが絞り込まれて表示される。<RESET>ボタンなら、絞り込まれる前の状態に戻る(すべてのレコードが表示される)。

4つのボタンには、onclickに続けて、直接スクリプトを書いている。4つのボタンのクリックで実行されるスクリプトを見てみよう。

<白い車>ボタン

carData.object.Filter="color=白"
carData.Reset()

<100万以下の車>ボタン

carData.object.Filter="price<=1000000"
carData.Reset()

<白で100万以下の車>ボタン

carData.object.Filter="color=白&price<=1000000"
carData.Reset()

<RESET>ボタン

carData.object.Filter=""
carData.Reset()

いずれも、carData.object.Filter=に続けて絞込の条件を指定してある。carDataがデータソースオブジェクトのIDで、以下、｢.object.Filter=｣として右辺に条件を記述する。｢object.Filter=｣の部分は固定と考えていい。そして、並び替えと同様にReset()メソッドを実行する。

条件は、｢項目名=データ｣のように、項目名とデータを｢=｣などの記号で結んで式にする。｢=｣の部分に使える記号は次のとおりだ。

= …… 等しい > …… より大きい >= …… 以上 < …… より小さい <= …… 以下 <> …… 等しくない

読み中・・・

■絞込、カレントレコード、recordCountプロパティ、recordNumberプロパティの関係

絞込を行うと、繰り返しテーブルに表示されるレコード数は少なくなる。では、そのときレコードの総数を示すrecordNumberプロパティはどう変化するだろうか。表示されるレコードが少なくなるから、recordNumberプロパティも少なくなるのだろうか。あるいは、もともとのレコード数が維持されるのだろうか。

さらに、絞込を行うと、カレントレコードはどう変化するだろう。たとえば、ページを読み込んだ直後は、先頭にある｢ホンダのアコード｣のレコードがカレントレコードになるが、｢トヨタ｣のレコードだけを絞り込んだら、カレントレコードは｢ホンダのアコード｣のままだろうか、あるいは絞り込んだあとの先頭レコードだろうか。

もう1つ、recordNumberプロパティはどうだろう。繰り返しテーブルで全レコードを表示している状態では、先頭から順番に1、2、3……となるのは分かる。では、絞り込んだ結果、絞込前にrecordNumberプロパティが5、7、10だった3つのレコードだけが表示されたらどうだろうか。各レコードのrecordNumberプロパティは5、7、10のままだろうか。それとも、表示される順番に1、2、3となるだろうか。

次のサンプルが、以上の疑問の答えになっている。

【サンプル18:smp018.html】

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function toyotaFilter() {

carData.object.Filter="maker=トヨタ" carData.Reset() checkTotal()

}
function mazdaFilter() {

carData.object.Filter="maker=マツダ" carData.Reset() checkTotal()

}
function resetRecord() {

carData.object.Filter="" carData.Reset() checkTotal()

}
function checkTotal() {

input1.value = carData.recordset.recordCount

}
</SCRIPT>
</HEAD>
<BODY onload="checkTotal()">
<BUTTON onclick="toyotaFilter()">トヨタ車</BUTTON>
<BUTTON onclick="mazdaFilter()">マツダ車</BUTTON>
<BUTTON onclick="resetRecord()">RESET</BUTTON><BR>
recordCount=<INPUT ID="input1" SIZE=2></INPUT><BR>
<SPAN DATASRC="#carData" DATAFLD="name"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="maker"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="color"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="year"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="price"></SPAN>
<TABLE ID="table1" DATASRC="#carData" BORDER=1 STYLE="font-size:9pt">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR STYLE="cursor:hand;" onclick="alert(this.recordNumber)">
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>

<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

3つのボタンの下には、レコード総数を示すrecordCountプロパティの値が表示される。次の行が、その表示箇所の記述だ。

recordCount=<INPUT ID="input1" SIZE=2></INPUT><BR>

そして、ヘッダー部に、recordCountプロパティを表示するcheckTotal()関数を定義している。

function checkTotal() {

input1.value = carData.recordset.recordCount

}

そして、このcheckTotal()を、ページが読み込まれたとき(onload)、3つのボタンのいずれかがクリックされたとき実行している。

読み込んだ直後は、繰り返しテーブルで全レコードが表示されるので数値は19になる。絞込の各ボタンをクリックすれば、この数値が変化するのが確認できるだろう。つまり、recordCountプロパティは、絞り込んだ後に表示されるレコード数ということになる。

recordCountプロパティの下は、カレントレコードの表示だ。絞り込むと、カレントレコードは絞り込んだ後の先頭レコードになるのが確認できるはずだ。

各レコードをクリックすると、そのレコードのrecordNumberプロパティがアラート表示される。絞り込む前も後も、表示される順番に1、2、 3……となる。つまり、絞り込んでも、recordNumberプロパティはあくまで表示されているレコードの順番になるということだ。まとめると、次のとおりだ。

絞込を行うと、絞込後の先頭レコードがカレントレコードになる。さらに、recordCountプロパティは絞込後に表示されているレコード数になる。recordNumberプロパティは表示される順番に1、2、3……となる。

これも、｢だから、何なんだ｣かもしれないが、やはりスクリプトをいろいろと書いていくと、貴重な情報になると思う。
■nextPage()メソッド、previousPage()メソッド、カレントレコード、recordNumberプロパティ、recordCountプロパティの関係

さて、最後の実験だ。先に、繰り返しテーブルでDATAPAGESIZE属性を指定すれば、一度に表示するレコード数を制限できることを紹介した。そして、nextPage()とpreviousPage()メソッドを使って、ページを切り替えられることも紹介した。ここでも、やはりいくつかの疑問が生じる。

まず、一度に表示するレコード数を制限したとき、レコード総数のrecordCountプロパティはいくつになるだろう。表示されているレコード数になるだろうか。あるいは、表示されていないレコードも含めた総数になるだろうか。

次に、nextPage()とpreviousPage()メソッドでページを切り替えたとき、カレントレコードはどうなるだろうか。たとえば、読み込んだ直後は、先頭レコードの｢ホンダのアコード｣がカレントレコードだ。そして、nextPage()メソッドで次ページに切り替えたら、表示上の先頭レコードが｢マツダのデミオ｣になったとする。このとき、カレントレコードは｢ホンダのアコード｣｢マツダのデミオ｣のどらだろうか。

同じく、recordNumberプロパティも疑問だ。読み込んだ直後は、1、2、3……となるのは分かる。では、nextPage()メソッドで次ページを表示したとき、表示上の先頭レコードのrecordNumberプロパティは1になるだろうか。それとも、前ページからの続きの番号になるだろうか。

次のサンプルが、こうした疑問の答えだ。

【サンプル19:smp019.html】

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkTotal() {

input1.value = carData.recordset.recordCount

}
</SCRIPT>
</HEAD>
<BODY onload="checkTotal()">
<BUTTON onclick="table1.previousPage()"><-</BUTTON>
<BUTTON onclick="table1.nextPage()">-></BUTTON><BR>
recordCount=<INPUT ID="input1" SIZE=2></INPUT><BR>
<SPAN DATASRC="#carData" DATAFLD="name"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="maker"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="color"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="year"></SPAN>:
<SPAN DATASRC="#carData" DATAFLD="price"></SPAN>
<TABLE ID="table1" DATASRC="#carData" DATAPAGESIZE=5 BORDER=1 STYLE="font-size:9pt">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR STYLE="cursor:hand;" onclick="alert(this.recordNumber)">
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>

<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

2つのボタンはpreviousPage()とnextPage()メソッドでページを切り替える。その下が、レコード総数の recordCountプロパティの値、その下がカレントレコードだ。各レコードをクリックすると、そのレコードのrecordNumberプロパティがアラート表示されるのは、これまでのサンプルと同じだ。このサンプルで分かることは、次のとおり(実際に試してほしい)。

DATAPAGESIZEで一度に表示するページ数を制限しても、nextPage()メソッド、previousPage()メソッドでページを切り替えてもカレントレコード、recordCountプロパティ、recordNumberプロパティは変化しない。

つまり、並び替えや絞込とは異なり、DATAPAGESIZEの指定、nextPage()とpreviousPage()によるページ切替は、カレントレコード、recordCountプロパティ、recordNumberプロパティにいっさい影響を与えないのである。これも、データバインドを活用していくうえで、重要な知識になるだろう。

　

PART7　活用してみよう

最終回は、これまでの知識を応用して、より実践的なページを作ってみる。作成したのは、｢中古車データベースのデモ｣と｢7桁郵便番号検索～東京編｣の2つだ。あくまでサンプルだから、ソースは短く、スクリプトも大げさではない。にもかかわらず、2つのサンプルからは、応用･活用のアイデアがいろいろ思い浮かぶのではないかと思う。
■中古車データベースのデモ

このページでは、繰り返しテーブルを使っている。絞込や並び替えは用意していない。ポイントは、レコードをクリックすると背景が赤で文字が白になり、マーキー表示の文章も、クリックしたレコード(クルマ)の紹介文に切り替わることだ。これには、recordNumberプロパティが重要な役割を果たしている。まずは、ソースを示そう。

【サンプル20:smp020.html】

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
var i = 1
function chStyle() {

table1.rows[i].style.backgroundColor = "white" table1.rows[i].style.color = "black" i = carData.recordset.AbsolutePosition table1.rows[i].style.backgroundColor = "red" table1.rows[i].style.color = "white"

}
function chRecord(select_record) {

carData.recordset.AbsolutePosition = select_record.recordNumber chStyle()

}
</SCRIPT>
</HEAD>
<BODY onload="chStyle()">
<CENTER>
<MARQUEE STYLE="background-color:blue;color:white;font-size:18pt;"
DATASRC="#carData" DATAFLD="introduction">
</MARQUEE>
<P>
<TABLE ID="table1" DATASRC="#carData" BORDER=1 STYLE="font-size:9pt;width:500;">
<THEAD>
<TR BGCOLOR="silver">
<TD>車名</TD>
<TD>メーカー</TD>
<TD>色</TD>
<TD>生産年</TD>
<TD>価格</TD>
</TR>
</THEAD>
<TBODY>
<TR STYLE="cursor:hand;" onclick="chRecord(this)">
<TD><SPAN DATAFLD="name"></SPAN></TD>
<TD><SPAN DATAFLD="maker"></SPAN></TD>
<TD><SPAN DATAFLD="color"></SPAN></TD>
<TD><SPAN DATAFLD="year"></SPAN></TD>
<TD><SPAN DATAFLD="price"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

<OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="car_long.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

データソースとして指定したのは、car_long.txtというカンマ限りのテキストファイルだ。その中身は、次のようになっている。

name,maker,color,year:Int,price:Int,introduction
アコード,ホンダ,白,92,800000,"ワンオーナー車。丁寧に使われていたので、程度はかなりのモノ。お買い得車。"
マークⅡ,トヨタ,白,94,1500000,"トヨタの定番高級車。エンジン、内装ともに最上ランク。ちょっと高級志向のあなたに！"
カムリ,トヨタ,黒,90,550000,"黒のカムリは希少。オヤジ車と侮るべからず！"

: :

これまでのサンプルで使ったcar.txtとのちがいは、introductionという項目を追加していることだ。この項目のデータは、各クルマの紹介文だ。繰り返しテーブルでintroduction項目のデータを表示することもできるが、そうすると、表が横長になってしまう。そこで、この introduction項目のデータはマーキーとして表示してある。

スクリプトを見ていこう。まず、グローバル変数iには｢1｣が入る。そして、ページが読み込まれると、chStyle()関数が実行される。chStyle()関数の定義は次のとおりだ。

function chStyle() {

table1.rows[i].style.backgroundColor = "white" table1.rows[i].style.color = "black" i = carData.recordset.AbsolutePosition table1.rows[i].style.backgroundColor = "red" table1.rows[i].style.color = "white"

}

ここでポイントなのが、rowsという配列だ。table1は繰り返しテーブルのIDだが、rowsという配列を使うことで、この表の行を特定できる。たとえば、table1.rows[0]なら先頭行、table1.rows[1]なら2行目……といった具合(0から始まることに注意)。これを利用して、各行のスタイルであるbackgroundColor(背景色)とcolor(文字色)を指定している。ページ読込直後はiに1が入っているから、

table1.rows[1].style.backgroundColor = "white"
table1.rows[1].style.color = "black"

によって、2行目のレコードの背景が白、文字が黒になる。次に、変数iには、

i = carData.recordset.AbsolutePosition

によってカレントレコードの番号が入る。読込直後はカレントレコードは先頭、つまり1番のレコードだから、iには1が入る。そして、

table1.rows[1].style.backgroundColor = "white"
table1.rows[1].style.color = "black"

によって、2行目の同じレコードの背景が赤、文字が白になる。

なんでこんな面倒なことをしているかというと、このchStyle()関数は、繰り返しテーブルの各レコードをクリックしたときにも実行しているからだ。レコードをクリックすると、そのレコードの背景を赤、文字を白にすると同時に、1つ前のレコードの背景色を白、文字を黒に戻さなければならない。この動きを理解するために、各レコードをクリックしたとき実行されるchRecord(select_record)関数を見てみよう。chRecord (select_record)関数の定義は次のとおりだ。

function chRecord(select_record) {

carData.recordset.AbsolutePosition = select_record.recordNumber chStyle()

}

この関数は、レコードをクリックすると、chRecord(this)の形式で実行されるため、引数のselect_recordには、クリックされたレコードそのものが入る。そして、そのレコードのrecordNumberプロパティを、カレントレコードの番号に入れる。これによって、クリックしたレコードがカレントレコードになる。その後、chStyle()関数を実行する。仮に、5番目のレコードをクリックしたとしよう。すると、カレントレコードが5番目になったあと、再びchStyle()関数が実行される。chStyle()関数の動きを見てみよう。

まず、iにはまだ1が入っているはずだ。だから、先頭のレコードは背景色が白、文字が黒に戻る。その後で、iにはカレントレコードの番号である5が入る、そして、5番目の(つまりクリックした)レコードの背景が赤、文字が白になる。

以上が、クリックしたレコードだけ色が変化する仕掛けだ。では、マーキーはどうだろう。マーキーの記述は次のとおりだ。

<MARQUEE STYLE="background-color:blue;color:white;font-size:18pt;"
DATASRC="#carData" DATAFLD="introduction">
</MARQUEE>

ここには何の仕掛けもない。カレントレコードのintroduction項目のデータが表示されるだけだ。繰り返しテーブルでレコードをクリックすると、そのレコードがカレントレコードになるから、マーキーにも、そのレコードのintroduction項目のデータが表示されるにすぎない。

さて、このサンプル、クルマの画像ファイルを使えば、もっと実用的になりそうだ。レコード数がたくさんあれば、ページを切り替えられるようにしたり、絞込、並び替えの機能を盛り込んでもいい。データソースのテキストファイルは、Excelなどで簡単に作成できるから、データを更新するのもそれほど手間ではないだろう。
■7桁郵便番号検索～東京編

今度は、絞込を中心にしたサンプルだ。東京都の5桁の旧郵便番号、7桁の郵便番号、住所1(区名)、住所2(町名、ビル名など)に条件を設定し、レコードを絞り込める。たとえば｢住所1｣に｢練馬区｣と入力して<絞込>ボタンをクリックすれば、練馬区のレコードだけが表示される。文字は一部でかまわない。たとえば｢住所2｣に｢神｣と入力して絞り込めば、住所2に｢神｣という文字を含むレコードだけが表示される。｢住所1｣を｢練馬区｣、｢住所2｣を｢神｣にして、練馬区のうち住所に｢神｣という文字を含むレコードといったand検索も可能だ。

絞込を解除するなら<絞込解除>ボタンをクリックし、<、>ボタンでページを切り替えられる。また、絞り込まれたレコード数が｢絞り込まれたレコード数/総レコード数｣の形式で表示される。ソースは次のとおり。

【サンプル21:smp021.html】

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function filterRec() {

var check_cond = input1.value + input2.value + input3.value + input4.value if(check_cond != "") { var cond1 = "old_num=" + "*" + input1.value + "*" var cond2 = "new_num=" + "*" + input2.value + "*" var cond3 = "address2=" + "*" + input3.value + "*" var cond4 = "address3=" + "*" + input4.value + "*" var cond_all = cond1 + "&" + cond2 + "&" + cond3 + "&" + cond4 tokyoData.object.Filter = cond_all tokyoData.Reset() checkCount() }

}

function filterReset() {

input1.value = "" input2.value = "" input3.value = "" input4.value = "" tokyoData.object.Filter = "" tokyoData.Reset() checkCount()

}

function checkTotal() {

span1.innerText = tokyoData.recordset.recordCount span2.innerText = tokyoData.recordset.recordCount

}

function checkCount() {

span1.innerText = tokyoData.recordset.recordCount

}

</SCRIPT>
</HEAD>
<BODY onload="checkTotal()">
<CENTER>
<BUTTON onclick="table1.previousPage()"><</BUTTON>
<BUTTON onclick="table1.nextPage()">></BUTTON>
<BUTTON onclick="filterRec()">絞込</BUTTON>
<BUTTON onclick="filterReset()">絞込解除</BUTTON>

[<SPAN ID="span1"></SPAN>/
<SPAN ID="span2"></SPAN>]

<TABLE ID="table1" DATASRC="#tokyoData" DATAPAGESIZE=15 STYLE="font-size:9pt;">
<THEAD>
<TR STYLE="background-color:navy;color:white;">
<TD ALIGN="center">旧郵便番号<BR><INPUT ID="input1" SIZE=8 STYLE="font-size:8pt;"></INPUT></TD>
<TD ALIGN="center">7桁郵便番号<BR><INPUT ID="input2" SIZE=10 STYLE="font-size:8pt;"></INPUT></TD>
<TD ALIGN="center">住所1<BR><INPUT ID="input3" SIZE=10 STYLE="font-size:8pt;"></INPUT></TD>
<TD ALIGN="center">住所2<BR><INPUT ID="input4" SIZE=30 STYLE="font-size:8pt;"></INPUT></TD>
</TR>
</THEAD>

<TBODY>
<TR STYLE="background-color:silver">
<TD><SPAN DATAFLD="old_num"></SPAN></TD>
<TD><SPAN DATAFLD="new_num"></SPAN></TD>
<TD><SPAN DATAFLD="address2"></SPAN></TD>
<TD><SPAN DATAFLD="address3"></SPAN></TD>
</TR>
</TBODY>
</TABLE>

</CENTER>

<OBJECT ID=tokyoData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="tokyo.csv">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</BODY>
</HTML>

用意するデータソースのテキストファイルのtokyo.csvは、次のような中身をしている。

old_num:STRING,new_num:STRING,address_f1:STRING,address_f2:STRING,address_f3:STRING,
=>address1:STRING,address2:STRING,address3:STRING
100,1000000,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｲｶﾆｹｲｻｲｶﾞﾅｲﾊﾞｱｲ,東京都,千代田区,以下に掲載がない場合
102,1020072,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｲｲﾀﾞﾊﾞｼ,東京都,千代田区,飯田橋
102,1020082,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｲﾁﾊﾞﾝﾁｮｳ,東京都,千代田区,一番町
101,1010032,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｲﾜﾓﾄﾁｮｳ,東京都,千代田区,岩本町
101,1010047,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｳﾁｶﾝﾀﾞ,東京都,千代田区,内神田
100,1000011,ﾄｳｷｮｳﾄ,ﾁﾖﾀﾞｸ,ｳﾁｻｲﾜｲﾁｮｳ,東京都,千代田区,内幸町

: :

繰り返しテーブル、一度に表示するレコード数、ページの切替、そして、絞込とその解除方法については、これまでに紹介したので繰り返さない。このページのポイントは、4つの入力フォームに入力された文字をAND条件で絞り込む仕掛け、および絞込を行ったときに、絞り込まれたレコード数を表示する仕掛けの2つだ。

まず、入力フォームには<INPUT>を使っている。たとえば旧郵便番号の入力箇所の記述は次のようになっている。

<TD ALIGN="center">旧郵便番号<BR><INPUT ID="input1" SIZE=8 STYLE="font-size:8pt;"></INPUT></TD>

つまり、｢旧郵便番号｣という文字と<INPUT>を1つのセル内にいっしょに書き込み、<BR>タグで2行にしているにすぎない。<INPUT>タグのIDはinput1だ。同様に、｢7桁郵便番号｣にはinput2、｢住所1｣にはinput3、｢住所2｣にはinput4という<INPUT>タグを入れてある。

<絞込>ボタンをクリックすると、filterRec()関数が実行される。filterRec()関数の定義は次のとおりだ。

function filterRec() {
var check_cond = input1.value + input2.value + input3.value + input4.value

if(check_cond != "") { var cond1 = "old_num=" + "*" + input1.value + "*" var cond2 = "new_num=" + "*" + input2.value + "*" var cond3 = "address2=" + "*" + input3.value + "*" var cond4 = "address3=" + "*" + input4.value + "*" var cond_all = cond1 + "&" + cond2 + "&" + cond3 + "&" + cond4 tokyoData.object.Filter = cond_all tokyoData.Reset() checkCount() }

}

まず、先ほどの4つの<INPUT>タグのvalue、つまり入力された文字が連結されて変数check_condに入る。そして、変数check_condが空かどうか調べる。空なら何もしない。空でなければ、つまり何か4つの<INPUT>タグに何かが入力されていれば、if文の内部が実行される。

たとえば、｢住所1｣に｢練馬｣と入力し、他に何も入力しないで<絞込>ボタンをクリックすると、変数cond1～cond4には次のような文字列が入ることになる。

cond1……old_num=**
cond2……new_num=**
cond3……address2=練馬
cond4……address3=**

変数cond_allは、この4つの変数を"&"で連結した文字列が入るから、この場合なら、次の文字列が入ることになる。

old_num=**&new_num=**&address2=練馬&address3=**

あとは、この変数old_numを条件に絞込を行っているだけだ。**はワイルドカードで、けっきょくすべてのレコードを意味することになるから、 address2=練馬という条件にひっかかるレコードだけが絞り込まれることになる。以上が、複数の条件をANDで結んで絞り込む仕掛けだ。

そして、絞り込んだあとには、checkCount()関数が実行される。定義は次のとおりだ。

function checkCount() {
span1.innerText = tokyoData.recordset.recordCount
}

前回、絞込を行うと、レコード総数を示すrecordCountの値は、絞り込んだ後のレコード数になることを紹介した。要するに、 checkCount()関数は、絞り込んだあとでspan1というIDの<SPAN>タグの中の文字を、このrecordCountにしているだけだ(innerTextについて分からない方は調べてほしい)。

なお、ページを読み込んだ直後には、checkTotal()関数も実行している。定義は次のとおりだ。

function checkTotal() {
span1.innerText = tokyoData.recordset.recordCount
span2.innerText = tokyoData.recordset.recordCount
}

これで、span1とspan2に総レコード数が表示される。span2の方は、このあと数値が変化することはない。総レコード数をつねに表示しておきたいからだ。これに対し、span1の方は、絞込が行われるごとに先ほどのcheckCount()関数が実行されるから、絞り込まれたレコード数へと変化することになる。
■より高度なトピック

さて、長々と解説してきたデータバインドも、とりあえずこれでおしまいだ。ただし、まだまだ解説していなかったり、ボクもよく分かっていないトピックがウンとある。

たとえば、レコードを追加したり削除することもできる。あるいは、特定のレコードをマークして、一時的にメモリに記憶しておくこともできるようだ。

さらに、データソースであるテキストファイルの読込状態をチェックするイベントハンドラもある。データバインドでは、HTMLファイルとデータソースであるテキストファイルをサーバから読み込み、そのあとクライアントで処理を行うわけだが、テキストファイルが大きいと、やはり読込に時間がかかってしまう。完全に読み込む前にユーザーが絞込などを行うと、エラーになる可能性があるわけだ。そこで、その回避策として、こうしたイベントハンドラが用意されているのだ。

他にも、まだあるので、関心のある方は調べてみよう。もしも要望があれば、筆者も調べてみたいが、まぁ、要望はないだろうなぁ(まず、ここまで読む人はいない気もする。予想が外れればいいんたけれど)。

そういえば、最近マイクロソフトのHTMLエディタであるFrontPage98を購入し、使ってみた。立派に、データバインドも利用できる。ただし、使い方がよく分からない。データバインドの基本が分かっていないと、使いこなせないのではないかと思う。

さて、このデータバインド、IE4のDynamicHTMLの中では、商利用やIE4をクライアントとするイントラネットをターゲットにしている感が強い。実際、Webページの見た目をどうこうするタイプの機能ではないので、個人の一般ユーザーのあいだでは、あまり盛り上がらないだろう。が、見てのとおり、可能性と実用性はある。良くも悪くも、Windows98は普及し、どのマシンでもIE4が走っている時代がくるだろう。あと2～3年もすれば、データバインドが注目を浴び始めるだろうとボクは思っている

コメント(0) ｜

カテゴリ：パソコン > 総合

「sample_source」をウェブ検索する

2008年03月21日(金) 22:32:40 Modified by fedora_tutorial

Fedora 8 etc

sample_source

1

2

3

読み中・・・