DWRでテーブルを操作する(util.js使用)
DWRに同梱されている「util.js」を使用して、テーブルにデータを設定してみます。dwr.util.addRows
データを設定するには、dwr.util.addRowsを使用します。
書式は
dwr.util.addRows('tbodyのid', '表示するデータ', '表示に使用する関数', 'オプション')
dwr.util.removeAllRows
テーブルに設定されているデータを消去するには、dwr.util.removeAllRowsを使用します。
書式は
dwr.util.removeAllRows('tbodyのid', 'オプション')
サンプル
サンプルコードは以下の通り。
<html>
<head>
<title>DWR サンプル</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='dwr/util.js'></script>
<script type="text/javascript">
//セルの描画に使用する関数
var cellFunc = [
function(data) {return data; },
function(data) {return data.toUpperCase(); }
]
//ボタンを押したときに呼ばれる関数
function printData() {
//データ設定
dwr.util.addRows("sample_t", ['data_a', 'data_b', 'data_c'], cellFunc);
}
function clearData() {
//テーブルの中身を消去
dwr.util.removeAllRows("sample_t");
}
</script>
</head>
<body>
<input type="button" value="表示" onClick="printData();" />
<input type="button" value="消去" onClick="clearData();" /><br/>
<table border="1">
<thead>
<tr>
<th>data</th>
<th>Upper</th>
</tr>
</thead>
<tbody id="sample_t"> </tbody>
</table>
</body>
</html>
動かしてみると・・・
また、設定する値をリストの入れ子にすると、行列の表現が行えます。
<html>
<head>
<title>DWR サンプル</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src='dwr/util.js'></script>
<script type="text/javascript">
//セルの描画に使用する関数
var cellFunc = [
function(data) {return data[0]; },
function(data) {return data[1]; }
]
//ボタンを押したときに呼ばれる関数
function printData() {
//データ設定
dwr.util.addRows("sample_t", [['a1', 'a2'], ['b1', 'b2']], cellFunc);
}
function clearData() {
//テーブルの中身を消去
dwr.util.removeAllRows("sample_t");
}
</script>
</head>
<body>
<input type="button" value="表示" onClick="printData();" />
<input type="button" value="消去" onClick="clearData();" /><br/>
<table border="1">
<thead>
<tr>
<th>data_1</th>
<th>data_2</th>
</tr>
</thead>
<tbody id="sample_t"> </tbody>
</table>
</body>
</html>
実行結果
【参考URL】
util.js: Tables Manipulation
http://directwebremoting.org/dwr/browser/util/tables.html
DWRでリッチなWebページを作る！(7) - ユーティリティ関数「addRows」でテーブルを表示する
http://www.javadb.jp/Code.sd?id=1206