## データバインド機能

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

#### ■ データバインドとは

データバインドとは、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&gt;20"）
- CaseSensitive - 大文字小文字を区別する場合に true。
- AppendData - データを追加する。

#### ■ 参考文献

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

Copyright (C) 2001 杜甫々
初版：2001年6月3日
http://www.tohoho-web.com/wwwxx085.htm