data.jsp页面,
下面列出的是 <body>部分
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><body>
<table id="content">
<tr id="title">
<th width="11%" title="设备ID">设备ID</th>
<th width="12%" title="设备名称">设备名称</th>
<th width="11%" title="设备状态">设备状态</th>
<!-- 其它字段略去 -->
<th width="11%" title="授权码">授权码</th>
<th width="11%" title="审批状态">审批状态</th>
</tr>
<!-- 会调用后台 action的 getDeviceTypeList()方法-->
<s:set name="deviceTypeResource" value="deviceTypeList"/>
<s:set name="deviceStateResource" value="deviceStateList"/><s:iterator value="dataList">
<tr class="mouseOut" onmouseover="Mouse.over(this)"
onmouseout="Mouse.out(this)" onmousedown="Mouse.down(this)"
ondblclick="Buttondata.dbclick(this)"><td title="${deviceId}">${deviceId}</td>
<td title="${deviceName}">${deviceName}</td><td title="<h:resource list="deviceStateResource" value="deviceState"/>">
<h:resource list="deviceStateResource" value="deviceState"/>
</td><!-- 其它略去-->
<td title="${licenseKey}">${licenseKey}</td>
<td title="${approvalState}">
<h:resource list="deviceApprovalStateList" value="approvalState"/>
<!-- <s:hidden /> 会自动将设置id值，id值与name值一样，如果没有认为指定的话-->
<s:hidden name="approvalState" />
<s:hidden name="deviceState" />
<s:hidden name="licenseKey" />
</td>
<!-- 选中该记录后，进行其它操作，如更新 查看 删除 会将deviceId传递到action中，多个参数用& 分割 -->
<td id="params" class="hidden">deviceId=${deviceId}</td>
</tr>
</s:iterator>
</table>
</body>
</html>
data.jsp页面,
下面列出的是 <head>部分, 里面有js 先列出 jQuery实现
界面上
原子操作菜单按钮是如下的形式
<div>
<a code="${permisCode}" href="#" style="background-image:url(‘${imageUrl}‘)"
onclick="ThirdMenu.click(‘${permisUrl}‘, ‘${permisName}‘, ‘${permisId}‘, ‘${showType}‘)"
onfocus="this.blur()">${permisName}
</a>
</div>
jQuery实现，未必对应这个界面，方法都是一样的
<script type="text/javascript">
$(document).ready(function(){
$("#content tr.data").mousedown(function(e){
auditFlag = $(this).find(‘>td input[id="auditFlag"]‘).val()
status = $(this).find(‘>td input[id="status"]‘).val()showButton(false,‘DEVICEINFO_SIGN‘)
// 列一个调用showButton即可
});
})function showButton(show, code){
btn = $(parent.parent.document).find(‘#THIRDMENUFRAME‘).contents().find(‘a[code="‘+code+‘"]‘);
if(show){
btn.show()
} else {
btn.hide()
}
}
</script>
mootools实现，未必对应这个界面，方法都是一样的
界面上
原子操作菜单按钮是如下的形式
<div>
<a code="${permisName}" href="#" style="background-image:url(‘${imageUrl}‘)"
onclick="ThirdMenu.click(‘${permisUrl}‘, ‘${permisName}‘, ‘${permisId}‘, ‘${showType}‘)"
onfocus="this.blur()">${permisName}
</a>
</div>
<script type="text/javascript">window.addEvent(‘domready‘, function() {
//初始化时只加载新建，修改，删除，查看功能
//其它按钮请自己加
showButton(false,"生成授权码");
//鼠标点击某一条记录
$$("#content tr.mouseOut").addEvent(‘mousedown‘,function(event){//感觉不能使用 ">td input[id=‘approvalState‘]"
//设备状态
var stateFlag = $(this).getElement(‘td input[id="deviceState"]‘).value;
//licenseKey 授权码
var licenseKey = $(this).getElement(‘td input[id="licenseKey"]‘).value;if(licenseKey==""){
//授权码为空是，生成授权码按钮可以使用
showButton(true,"生成授权码");
}else{
showButton(false,"生成授权码");
}//对于审批状态，还没有理清，暂时只加入少量的
if(stateFlag=="5"){ //调试状态
//显示启用，其它不显示
showButton(true,"设备启动");}
});});
/**
* 显示或隐藏按钮
*/
function showButton(show, code){
// contentDocument属性，是获取标准的jframe的html内容的属性
btn = $(parent.parent.document).getElement(‘#THIRDMENUFRAME ‘).contentDocument.getElement(‘a[code="‘+code+‘"]‘) ;
if(btn==null){
return;
}
if(show){
//btn.fade(1); //1代表可见
btn.getParent().setStyle("display","block");
}else{
//btn.fade(0); // 0代表不可见
btn.getParent().setStyle("display","none");
}
}/**
* getElement 类似于 jQuery的 find()方法
**/
ops-web运维平台data.jsp-jquery-mootools,布布扣,bubuko.com