DWRでリッチなWebページを作る！(8) - addRows()のオプションで行や列の背景色を変える
前回は、addRows()を使用して表を作成するサンプルを紹介しました。今回は、addRows()のオプションを指定して、表の行や列の背景色を変えるサンプルを紹介します。
addRows()の4つ目の引数には連想配列の形で以下の3つのオプションを設定することが可能です。
| escapeHtml | 各カラムに編集するテキストに対してクロスサイトスクリプティング対策のエスケープ処理をするかしないかを設定する。デフォルトはtrue。 |
|---|---|
| rowCreator | 行毎にコールされる関数を設定する。主にtrタグを生成し、その属性を設定するために使用する。 |
| cellCreator | 各行のカラム毎にコールされる関数を設定する。主にth、tdタグを生成し、その属性を設定するために使用する。 |
今回のサンプルでは「rowCreator」と「cellCreator」を使用して行や列の背景色を変更します。以下は行の背景色を変更するサンプルの画面です。1行毎に背景色を変えています。
サーバ側のJavaのソースは前回の「DWRでリッチなWebページを作る！(7) - ユーティリティ関数でテーブルを表示する」で使用したものを利用しています。以下がHTMLのソースの一部です。
var cellFuncs = [
function(data) { return data.id; },
function(data) { return data.lastname; },
function(data) { return data.firstname; }
];
UserTable.getUserList(function(data){
dwr.util.addRows("usertable", data, cellFuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
//一行毎に背景色を返る
if(options.rowIndex % 2 != 0)
{
row.style.background = '#99FFFF';
}
//生成したtrタグのDOMエレメントをリターンする
return row;
},
escapeHtml:false
});
});
function(data) { return data.id; },
function(data) { return data.lastname; },
function(data) { return data.firstname; }
];
UserTable.getUserList(function(data){
dwr.util.addRows("usertable", data, cellFuncs,{
rowCreator:function(options) {
var row = document.createElement("tr");
//一行毎に背景色を返る
if(options.rowIndex % 2 != 0)
{
row.style.background = '#99FFFF';
}
//生成したtrタグのDOMエレメントをリターンする
return row;
},
escapeHtml:false
});
});
rowCreatorに指定した関数の中でtrタグを生成し、そのtrタグのスタイル属性の背景色を設定しています。関数の引数のoptionsは関数の中で使用できる便利な値を保持しています。以下が参照可能な値の一覧です。
| rowData | 現在の行の各列の値を保持する連想配列 |
|---|---|
| rowIndex | 現在の行番号 |
| rowNum | 現在の行番号(rowIndexと同じ) |
| data | 各行の各カラムに編集されるデータ。addRows()の第3引数に指定した関数の戻り値。cellCreatorの場合のみ有効。 |
| cellNum | 現在の列番号。cellCreatorの場合のみ有効。 |
今回のサンプルでは、rowIndexを利用して一行毎に背景色を変更しています。rowCreatorとcellCreatorに指定する関数は、それぞれtrタグ、th,tdタグをreturnする必要があります。次に列の背景色を変えるサンプルです。先頭の列の背景色を変更しています。
以下がHTMLのソースの抜粋です。
var cellFuncs = [
function(data) { return '<b>' + data.id + '</b>'; },
function(data) { return data.lastname; },
function(data) { return data.firstname; }
];
UserTable.getUserList(function(data){
dwr.util.addRows("usertable", data, cellFuncs,{
cellCreator:function(options) {
var cell = document.createElement("td");
//最初のカラムの背景色を変える
if(options.cellNum == 0)
{
cell.style.background = '#99FFFF';
}
//生成したtdタグのDOMエレメントをリターンする
return cell;
},
escapeHtml:false
});
});
function(data) { return '<b>' + data.id + '</b>'; },
function(data) { return data.lastname; },
function(data) { return data.firstname; }
];
UserTable.getUserList(function(data){
dwr.util.addRows("usertable", data, cellFuncs,{
cellCreator:function(options) {
var cell = document.createElement("td");
//最初のカラムの背景色を変える
if(options.cellNum == 0)
{
cell.style.background = '#99FFFF';
}
//生成したtdタグのDOMエレメントをリターンする
return cell;
},
escapeHtml:false
});
});
cellNumを参照して最初の列の背景色のみを変更しています。
| (2007年12月5日) |
ちょっと一休み. Javaキーワード並び替えゲーム
画面に表示される文字列を並び替えるとJavaに関連するキーワードになります。ヒントをたよりに並び替えを行ってエンターを押してください。
ユーザ登録をしてログインするとランキングに参加できます。
 |
Flex Tips |  |
|
 |
|
DWRでリッチなWebページを作る！ | |
|
|
Java Tips java.io 編 | |
|
|
|
Java Tips java.lang 編 | |
|
|
|
Java Tips java.math 編 | |
|
|
|
Java Tips java.util 編 | |
|
|
|
Java Tips java.nio 編 | |
|
|
|
Java Tips java.management 編 | |
|
|
|
Javaからデータベースを利用する | |
|
|