Document Object Model
Written 4/22/01
10. Data Binding
外部のデータベースとドキュメント内のオブジェクトを結び付けます。
■Data Source Object
外部のデータベースを参照するためのものが Data Source Object(DSO)です。 代表的なものに Tabular Data Control(TDC) があります。
これをHTML内に埋め込むには次のように記述します。 
  <OBJECT ID="Score" WIDTH=0 HEIGHT=0
  CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
    <PARAM NAME="DataURL" VALUE="../js2/data/score.csv">
    <PARAM NAME="UseHeader" VALUE="true">
  </OBJECT>
これは3行目にあるように ../js2/data/score.csv というカンマ区切りのテキストファイルを見に行きます。 このファイルの内容は次のようです。 
  data/score.csv
  -------------------------------------------
  名前,性,国語:Int,算数:Int,理科:Int,社会:Int
  さくら,女,75,71,8,66
  知世,女,62,2,89,60
  小狼,男,51,28,70,31
  千春,女,68,61,46,12
  奈緒子,女,89,55,69,24
  利佳,女,79,30,79,81
TDC はこれをデータベース（Recordset）と認識してくれます。 このオブジェクトを操作することによって値を取り出すことができます。 詳しくはTabular Data Control(1)をご覧ください。
■オブジェクトとデータベースを結びつける
例えば、<SPAN>とデータベースを結び付けるには次のようにします。 
  <SPAN DATASRC="#Score" DATAFLD="名前"></SPAN>
これは次のように表示されます。

DATASRC は DSO の ID を指定します。 "#"をつけるのを忘れないように。 DATAFLD はフィールドを指定します。 表示されるのは最初のレコードのそのフィールドの値です。

上のボタンを押すと、 そのボタンの表示のとおり現在のレコードが移動し名前が変わります。 ソースは次のとおりです。 
  <INPUT TYPE="button" VALUE="MoveFirst" ONCLICK="Score.recordset.MoveFirst()">
  <INPUT TYPE="button" VALUE="MovePrevious" ONCLICK="Score.recordset.MovePrevious()">
  <INPUT TYPE="button" VALUE="MoveNext" ONCLICK="Score.recordset.MoveNext()">
  <INPUT TYPE="button" VALUE="MoveLast" ONCLICK="Score.recordset.MoveLast()">
<SPAN> ではデータベースの値が innerHTML に反映されますが、 <A> は href に、 <IMG> は src とタグによって様々です。 詳しくは Binding HTML Elements to Data をごらんください。
■テーブルとデータベースを結びつける
テーブルとデータベースを結び付けるには次のようにします。 
  <TABLE DATASRC="#Score">
   <TR>
    <TD><SPAN DATAFLD="名前"></SPAN></TD>
    <TD><SPAN DATAFLD="国語"></SPAN></TD>
    <TD><SPAN DATAFLD="算数"></SPAN></TD>
   </TR>
  </TABLE>
自動的に展開されてテーブルの各行に順番にレコードが割り当てられて 次のように表示されます。

フィルターをかけてレコード数をしぼりこむこともできます。

上のボタンを押すと、国語が70点以上のレコードのみ表示されます。 ソースは次のとおりです。 
    Score.Filter = "国語>=70";
    Score.Reset();
詳しくはTabular Data Control(2)をご覧ください。
Back