データバインド機能ホームページ制作京都｜ホームページ作成のリュウム

アクセスを増やす20の方法

データバインド機能

トップ > アラカルト > データバインド機能

データバインドとは

データバインドとは、CSVファイル（カンマで区切られた値ファイル）に記述されたデータを簡単に、Webページに表示したりする機能です。Internet Explorer 4.0 からサポートされています。

CSVファイルの先頭行を表示する

まず、以下の内容のファイル（test1.csv）を作成してください。

Tanaka,19,Tokyo
Hamada,32,Osaka
Suzuki,26,Chiba

また、次の内容の HTML ファイル（test1.htm）を作成してください。

<html>
<head><title>データバインド</title></head>
<body>

<object id="ID1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="test1.csv">
</object>

<span datasrc="#ID1" datafld="Column1"></span> /
<span datasrc="#ID1" datafld="Column2"></span> /
<span datasrc="#ID1" datafld="Column3"></span>

</body>
</html>

IE4.0 以降のブラウザで test1.htm を表示すると、CSV ファイルの内容が Web ページに割り当てられて次のように表示されます。これがデータバインド機能です。

Tanaka / 19 / Tokyo

<span datasrc="ID1" datafld="Column1"> は、ID1 で示されるデータソースから、１番目のカラム（Column1）を読みとって表示することを意味します。データソースは <object> で test1.csv ファイルから読み取るように定義されています。classid は何も考えず、このまま記述してください。

JavaScript で次を表示する

test1.htm に次のような記述を加えてみてください。それぞれのボタンを押すことで、表示する行を変更することができます。

<button onclick="ID1.recordset.MoveFirst()">最初</button>
<button onclick="ID1.recordset.MoveLast()">最後</button>
<button onclick="ID1.recordset.MovePrevious()">前</button>
<button onclick="ID1.recordset.MoveNext()">次</button>

CSVファイルをテーブル形式に表示する

CSV ファイルをテーブル形式に表示することもできます。test1.htm ファイルを次のように修正してください。

<object id="ID1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="test1.csv">
</object>

<table datasrc="#ID1" border=1>
<tr>
<td><span datafld="Column1"></span></td>
<td><span datafld="Column2"></span></td>
<td><span datafld="Column3"></span></td>
</tr>
</table>

次のように表示されます。

Tanaka	19	Tokyo
Hamada	32	Osaka
Suzuki	26	Chiba

列に名前をつける

UseHeader を指定することで、CSV ファイルの先頭行をヘッダ（列名）として扱うことができます。

NAME,AGE,ADDR
Tanaka,19,Tokyo
Hamada,32,Osaka
Suzuki,26,Chiba

test1.htm ファイルを次のように修正してください。

<object id="ID1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="test1.csv">
<param name="UseHeader" value="true">
</object>

<table datasrc="#ID1" border=1>
<thead><tr><th>名前</th><th>年齢</th><th>住所</th></tr></thead>
<tr>
<td><span datafld="NAME"></span></td>
<td><span datafld="AGE"></span></td>
<td><span datafld="ADDR"></span></td>
</tr>
</table>

JavaScript でソートする

JavaScript を用いてテーブルのデータをダイナミックに操作することもできます。下記の例では、項目名の部分をクリックするとその列で値をソートします。

<table datasrc="#ID1" border=1>
<thead>
<tr>
<th onclick="ID1.Sort='NAME'; ID1.Reset();">名前</th>
<th onclick="ID1.Sort='AGE'; ID1.Reset();">年齢</th>
<th onclick="ID1.Sort='ADDR'; ID1.Reset();">住所</th>
</tr>
</thead>
<tr>
<td><span datafld="NAME"></span></td>
<td><span datafld="AGE"></span></td>
<td><span datafld="ADDR"></span></td>
</tr>
</table>

次ページ、前ページをサポートする

件数が増えてくると、次のようにして、一度に10行づつ表示することもできます。

<button onclick="T1.previousPage()">前ページ</button>
<button onclick="T1.nextPage()">次ページ</button>

<table datasrc="#ID1" border=1 id="T1" datapagesize=10>

データソースのパラメータ

<param name="属性名" value="値"> や、JavaScript の識別子.属性名 = 値で指定できる属性には以下のものがあります。

DataURL - データファイルのURL。
UseHeader - データ先頭行をヘッダ（列名）と見なす場合に true。
FieldDelim - フィールドの区切り文字。省略時はカンマ（,）。
RowDelim - 行の区切り文字。省略時は改行。
EscapeChar - エスケープに用いる文字。（例：value="\"）
TextQualifier - データを囲む文字。省略時はダブルクォート（"）。
CharSet - キャラクタセット情報。（例：value="Shift_JIS"）
Language - 言語情報。
Sort - 指定した列でソートする。"-列名" とすると逆順にソート。
Filter - 条件。（例：value="AGE>20"）
CaseSensitive - 大文字小文字を区別する場合に true。
AppendData - データを追加する。

参考文献

Microsoft MSDN Online
http://.microsoft.com/japan/developer/library/jpisdk/dhtml/content/data_binding.htm