仕事で使っているDWR。
JavaでWeb開発の経験があれば簡単にAJAXができる優れもの。

解説は他のサイトに載っているので、ここでは語りません。


仕事上必要な機能があってちょっと拡張したので載せておきます。

DWRUtil.addRowsの拡張

1.テーブルの属性をちょっとだけ指定できるようにした
→colSpan と アライメント だけ
2.複数行で１レコードを表示できるようにした。
3.tdにスタイルクラスを指定できるようにした

使用例↓
<script>
var l = "left";
var c = "center";
var r = "right";

// テーブルに指定する属性
var attributes = [[[1,r],[1,l],[2,l]],[[1,c],[1,c],[1,c],[1,c]]];

// 値を取得する関数群
var cells = [[
function(data){ return data.id;},
function(data){ return data.name;},
function(data){ return data.summary;}
],[
function(data){ return data.birth;},
function(data){ return data.sex;},
function(data){ return data.detail1;},
function(data){ return data.detail2;}
]];

fill = function(data) {
DWRUtil.removeAllRows("tdata");
WDWRUtil.addGroupedRows("tdata", data, cells, attributes, "スタイルクラス名");
};

getList = function() {
連携クラス.データ取得メソッド(fill);
};

</script>

<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th colspan="2">summary</th>
</tr>

<tr>
<th>birth</th>
<th>sex</th>
<th>detail1</th>
<th>detail2</th>
</tr>
</thead>
<tdata id="tdata"></tdata>
</table>



スクリプト↓
/**
* DWRUtilのラッパー
*/
function WDWRUtil() { }

/**
* 複数行でグループ化されているテーブルにaddRowFuncに従って表示する
*/
WDWRUtil.addGroupedRows = function(element, data, cellFuncs, cellAttributes, className, options) {
element = $(element);
if (element == null) {
return;
}
if (!DWRUtil._isHTMLElement(element, ["table", "tbody", "thead", "tfoot"])) {
return;
}
if (!options) options = {};
if (!options.rowCreator) options.rowCreator = DWRUtil._defaultRowCreator;
if (!options.cellCreator) options.cellCreator = DWRUtil._defaultCellCreator;

var tr, rowNum;
if (DWRUtil._isArray(data)) {
for (rowNum = 0; rowNum < data.length; rowNum++) {
options.rowData = data[rowNum];
options.rowIndex = rowNum;
options.rowNum = rowNum;
for (setNum=0; setNum < cellFuncs.length; setNum++) {
options.data = null;
options.cellNum = -1;
tr = WDWRUtil._addGroupedRowInner(cellFuncs[setNum], cellAttributes[setNum], className, options)
if (tr != null) {
tr.className=(rowNum%2 ? "odd" : "even");
element.appendChild(tr);
}
}
}
} else if (typeof data == "object") {
rowNum = 0;
for (var rowIndex in data) {
alert('object?');
options.rowData = data[rowNum];
options.rowIndex = rowNum;
options.rowNum = rowNum;
for (setNum=0; setNum < cellFuncs.length; setNum++) {
options.data = null;
options.cellNum = -1;
tr = WDWRUtil._addGroupedRowInner(cellFuncs[setNum], cellAttributes[setNum], className, options)
if (tr != null) {
tr.className=(rowNum%2 ? "odd" : "even");
element.appendChild(tr);
}
}
rowNum++;
}
}
return rowNum-1;
};

/**
* cellAttributesに従った行挿入
*/
WDWRUtil._addGroupedRowInner = function(cellFuncs, cellAttributes, className, options) {
var tr = options.rowCreator(options);
if (tr == null) return null;
for (var cellNum =0; cellNum < cellFuncs.length; cellNum++) {
var func = cellFuncs[cellNum];
var reply = func(options.rowData, options);
options.data = reply;
var td = options.cellCreator(options);
if (td != null) {
if (reply != null) {
if (DWRUtil._isHTMLElement(reply)) td.appendChild(reply);
else td.innerHTML = reply;
}
td.colSpan = cellAttributes[cellNum][0];
td.align = cellAttributes[cellNum][1];
td.className= className;
tr.appendChild(td);
}
}
return tr;
};