DWRでリッチなWebページを作る！(7) - ユーティリティ関数「addRows」でテーブルを表示する

DWRはutil.jsの中でHTMLを操作する便利なJavaScriptの関数を提供しています。今回は、その中のaddRows()を使ってテーブルを操作するサンプルを紹介します。

さて、今回はutil.jsに定義されている「addRows()」を使って、リモートオブジェクトから取得したレコードをHTMLのテーブルに表示するWebアプリケーションを作成します。画面は以下のようになります。

ではまず、サーバ側のソースから見ていきます。

「UserBean.java」

package myajax.table;

public class UserBean {

      private String id = null;
      private String lastname = null;
      private String firstname = null;

      public UserBean(){}

      public UserBean(String id,String lastname,String firstname)
      {
            this.id = id;
            this.lastname = lastname;
            this.firstname = firstname;
      }

      //IDのゲッター
      public String getId()
      {
            return id;
      }

      //IDのセッター
      public void setId(String id)
      {
            this.id =id;
      }

      //姓のゲッター
      public String getLastname()
      {
            return lastname;
      }
      //姓のセッター
      public void setLastname(String lastname)
      {
            this.lastname = lastname;
      }
      //名のゲッター
      public String getFirstname()
      {
            return firstname;
      }
      //名のセッター
      public void setFirstname(String firstname)
      {
            this.firstname = firstname;
      }
}

「UserBean.java」はテーブルに表示するユーザ情報を保持するJavaBeanクラスです。次に処理クラスの「UserTable.java」です。

「UserTable.java」

package myajax.table;

import java.util.ArrayList;
import java.util.List;

public class UserTable {

      //テーブルに表示するユーザ情報を保持するリスト
      private List userList = null;

      public UserTable()
      {
            //リストを初期化し、ユーザ情報をリストにつめる
            userList = new ArrayList();
            userList.add(new UserBean("1","Java","一郎"));
            userList.add(new UserBean("2","Java","二郎"));
            userList.add(new UserBean("3","Java","三郎"));
            userList.add(new UserBean("4","Java","四郎"));
      }

      //リストにつめたユーザ情報をUserBean[]の配列として返却する
      public UserBean[] getUserList()
      {
            UserBean[] users = new UserBean[userList.size()];
            return userList.toArray(users);
      }
}

次に以下を「dwr.xml」に追加します。

「dwr.xml(一部抜粋)」

最後に今回のポイントであるJavaScriptのコードを紹介します。

「usertable.html(一部抜粋)」

<table border="1">
      <thead>
            <tr>
                  <th>ID</th>
                  <th>姓</th>
                  <th>名</th>
            </tr>
      </thead>
      <tbody id="usertable"> </tbody>
</table>

<script type="text/javascript"></script>

addRows()はテーブルに行を挿入する関数ですので、あらかじめ挿入先のテーブルを用意しておく必要があります。行を挿入する対象となるタグは「table」、「tbody」、「thead」、「tfoot」のいずれかを指定できますが、ヘッタとフッタは固定にする場合が多いので通常は「tbody」が挿入先になります。addRows()の引数はそれぞれ以下を指定します。

     第1引数：レコード挿入する対象のタグのID属性の値
     第2引数：表示データを保持する配列
     第3引数：各列に出力するテキストを生成する関数の配列
     第4引数：関数のオプションを連想配列の形式で指定する(任意)

第2引数には、表示するデータが格納されている配列を指定します。配列は1次元の配列も指定できますが、関数の用途から考えると今回のサンプルのように要素に連想配列を持つ多次元配列を指定する場合が多いと思います。JavaBeanと連想配列の関係については『DWRでリッチなWebページを作る！(4) - 引数と戻り値にJavaBeanを使用する』を参照して下さい。

第3引数には各カラムに出力する内容を編集する関数の配列を指定します。第2引数で指定された配列が関数の引数として与えられます。サンプルで紹介していますように、単純にデータを返却するだけでなく、ID(ユーザID)列のようにタグを編集することも可能です。関数の配列の要素は、要素順に行の左から各カラムに対応します。

第4引数の指定は任意で関数のオプションを指定します。詳細については次回以降で紹介します。今回指定している「escapeHtml:false」は各カラムに編集するテキストに対してクロスサイトスクリプティング対策のエスケープ処理をしないことを表しています。これを指定しないと今回のサンプルの場合、ID列に「<font color="red">1</font>」などと表示されてしまいます。

次回は第4引数を指定して、TRタグやTDタグに属性を追加する方法を紹介します。

(2007年12月5日)

ちょっと一休み. Javaキーワード並び替えゲーム