日期:2014-05-16  浏览次数:20371 次

Struts2结合JavaScript控制单选框的状态

需求:

某个页面有3种操作,新增、修改和删除,其中某个字段为只读状态,且在页面显示为单选形式:

1、新增:

A、初始状态:有效性为空


B、通过“组织单位”下拉选单选中某个“组织单位”,通过DWR会自动带出“联系人”下拉选单,然后会带出有效性的值,如果为“1”则选中为“有效”,为“0”则选中为“无效”:


?

2、修改与查询和新增模块的选中某个联系人后的画面类似。

处理方法:

步骤1、

?

<input type="hidden" id="active" name="active" />

?

步骤2:将有效性的<td>块作为一个<div>,名称为:stateId,另外创建两个单选框,name都为:radiobutton(注:这里可以用id,分别为:radiobutton1、radiobutton2等待,然后分别处理,不过如果用name,则通过getElementsByName可以得到一个数组,然后可以循环遍历进行判断、设置)

<td valign="middle">
	<div id="stateId">
		<input type="radio" name="radiobutton" value="1"
			checked="checked" disabled="disabled" />
		<s:text name="mdssuplier.valid" />
		<input type="radio" name="radiobutton" value="0"
			disabled="disabled" />
		<s:text name="mdssuplier.invalid" />
	</div>
</td>
?

?

2、增加页面的初始化方法:

// 初始化方法,设置有效性区域是否可见
function initSupplier() {
	// 通过Ext框架对象取得后台传过来的id为state的对象
	var state = Ext.get('state').dom;
	
	// 如果该对象为空,或者不为空但是值为空,则不显示“有效性”的区域(div,id为stateId)
	if( null == state || '' == state.value ) {
		Ext.get('stateId').dom.style.display = 'none';
	} else {// 否则显示
		Ext.get('stateId').dom.style.display = '';
	}  	
}

?

3、DWR代码调用JS方法,设置单选状态的值:

// 设置单选按钮的选中状态
function changeRadioValue(index) {
	// 显示“有效性”的区域(div,id为stateId)
	Ext.get('stateId').dom.style.display = "";
	
	// 根据index的值设置单选的值
	var x=document.getElementsByName("radiobutton");
	for(var i=0;i<x.length;i++){
		if(x[i].value==index)	{
			x[i].checked=true;
			break;
		}
	}
}
?