データバインド機能

トップ > アラカルト > データバインド機能
データバインド機能は、Internet Explorer 11 で廃止されました。代わりに Shadow DOM などを利用してください。(2018年1月7日追記)

データバインドとは

データバインドとは、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 で示されるデータソースから、1番目のカラム(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 ファイルを次のように修正してください。

<style>
.table1 { border-collapse: collapse; }
.table1 td { border: 1px solid gray; }
</style>

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

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

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

Tanaka19Tokyo
Hamada32Osaka
Suzuki26Chiba

列に名前をつける

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 の 識別子.属性名 = で指定できる属性には以下のものがあります。

参考文献


Copyright (C) 2001-2017 杜甫々
初版:2001年6月3日、最終更新:2017年3月20日
http://www.tohoho-web.com/wwwxx085.htm