下午忙了一下午,使用dwr在弹出的画面点击按钮排序的功能实现了,期间用到了一些知识,总结一下:
dwr配置下,service正常写,对传进去的flg做下处理进行排序。
onmouseover和onmouseout触发的函数参照辅助入力的文章。
/**
* Set flag for mouse over.
*/
function orderFlgMouseOver(obj) {
document.body.style.cursor="hand";
}
/**
* Set flag for mouse out.
*/
function orderFlgMouseOut(obj) {
document.body.style.cursor="default";
}
var orderFontCount = 2;
function setOrderFlag(orderObject, orderMode, orderFontIndex) {
for(var index = 0; index < orderFontCount; index++) {
if(index == orderFontIndex) {
$("orderFont" + index).className = "searchOrderFlgHighLight";
} else {
$("orderFont" + index).className = "searchOrderFlgLowLight";
}
}
testService.search(
orderObject,
orderMode,
function(resultList) {
searchResultTbl.fill(resultList);
});
}
var searchResultTbl = (function() {
var recordCount = 0;
return {
clear: function() {
dwr.util.removeAllRows("tblSearchResult", { filter: function(tr) {
return tr.id != "searchResult_PatternRow";
}});
recordCount = 0;
},
fill: function(resultList) {
searchResultTbl.clear();
// Cache the record count.
recordCount = resultList.length;
//Create a new set of rows cloned from the "searchResult_PatternRow".
for (var i = 0; i < resultList.length; i++) {
var result = resultList[i];
var id = i + "";
dwr.util.cloneNode("searchResult_PatternRow", { idSuffix: id });
dwr.util.setValue("searchResult_Test" + id, result.testNo);
$("searchResult_Possibility" + id).className = result.divClass;
dwr.util.setValue("searchResult_Possibility" + id,result.seikyuusakiName);
// Make the new row visible.
var row = $("searchResult_PatternRow" + id);
row.style.display = "";
row.className = result.trColorFlg;
}
}
};
})();
<div id="orderDiv0" style="position: absolute; left: 88px; top: 2px; display: none;" onMouseOver="orderFlgMouseOver(this)" onMouseOut="orderFlgMouseOut(this)" onclick="setOrderFlag('test', 'A', 0)" class="htmlFont">
<font id="orderFont0" class="searchOrderFlgLowLight">▲</font>
</div>
<div id="orderDiv1" style="position: absolute; left: 88px; top: 12px; display: none;" onMouseOver="orderFlgMouseOver(this)"
onMouseOut="orderFlgMouseOut(this)" onclick="setOrderFlag('test', 'D', 1)" class="htmlFont">
<font id="orderFont1" class="searchOrderFlgLowLight">▼</font>
</div>
<table id= "search_table" width="730" border="0" style="top:-90px;">
<tbody id="tblSearchResult">
<tr id="searchResult_PatternRow" class="tableDarkLine" style="display:none">
<td width="74" align="center">
<span id="searchResult_Test"></span>
</td>
<td width="300" align="left">
<input id="searchResult_Possibility" type="text" style="width: 290px;" onmouseover="txtMouseOver(this)" onmouseout="txtMouseOut(this)" readonly>
</td>
</tr>
</tbody>
dwr配置下,service正常写,对传进去的flg做下处理进行排序。
onmouseover和onmouseout触发的函数参照辅助入力的文章。
本文介绍了一个使用DWR技术实现的排序功能,通过设置鼠标悬停和移出效果增强用户体验,并详细展示了如何通过JavaScript操作DOM元素及调用后端服务完成数据的排序与展示。

被折叠的 条评论
为什么被折叠?



