`
ayuslove
  • 浏览: 4362 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery实现页面checkbox参数传递(Struts2)

阅读更多
用过Struts2(以后简称S2)标签的人可能知道,checkboxlist标签并不是很好用,今天在遇到一个页面需求的时候Google了一下,但没太满意的结果,要么就是弄的很复杂,要么写的不完整,无奈自己弄了下用iterator标签+jQuery实现参数传递,效果还算理想,记下来以免以后忘记。

简单说下需求:
    这个部分是权限管理-角色添加与对应模块关联的实现过程。
流程:
    1.角色列表页选择一个要‘添加/修改’关联模块的角色。
    2.进入该角色对应模块列表页,要求选中之前已经关联的模块,未选的即还没关联。
    3.将选好的模块跟该角色关联,显示操作结果。
实现:

主要就是下面这一个方法
<script type="text/javascript">
$(document).ready(function(){
	
	//得到服务器传过来的原有权限id的字符串,格式自定义,我的格式为"0001;0002;xxx;"
	var checkMenu = $('#checkedMenu').val();
	//alert(checkMenu);
	//分割字符串成数组
	var array = checkMenu.split(";");
	for(var i = 0 ; i < array.length ; i++){
		//设置原有权限菜单处于选中状态,其中$("#0001")为id为0001的节点。
		$("#"+array[i]+"").attr("checked",true);
	}
	
	$('#butn').click(function(){
		//将已选模块的ID拼成 ID;ID 的字符串
		var aa = "";
		var i = 0;
		$("input:checked").each(function(){
			var j = $("input:checked").size();	
	        if(this.checked){
	        	i++;
	            aa+=this.value;
	            if(i != j){
	            	aa += ";";
	            }
	        }
		})
		//赋值给一个变量
		$('#menuIds').attr('value',aa);
		//提交
		$('#urForm').submit();
	});
	
	$('#selectTable').tablesorter();
});
</script>


form里的内容
<s:form id="urForm" name="urForm" method="post"
	action="sysRoleAddModuleThree" namespace="/bm" theme="simple">
	
	<s:hidden name="roleId" />
	<s:hidden name="checkedMenu" id="checkedMenu" />
	<s:hidden name="menuIds" id="menuIds" />
	
	<table id="selectTable" class="tablesorter">
		<thead>
		<tr>
			<th>选择</th>
			<th>注释</th>
			<th>创建时间</th>
			<th>是否有效</th>
			<th>链接URL</th>
		</tr>
		</thead>
		<tbody class="data-content">
		<s:iterator value="moduleList" status="stat">
			<tr>
				<td>
					<input name="modu" type="checkbox" id='<s:property value="moduleId"/>'
						value='<s:property value="moduleId"/>'>
				</td>
				<td><s:property value="modDeclare" /></td>
				<td><s:date name='createTime' format='yyyy年MM月dd日HH点mm分' /></td>
				<td><s:property value="isDisplay" /></td>
				<td><s:property value="moduleUrl" /></td>
			</tr>
		</s:iterator>
		</tbody>
		<tfoot>
		<tr>
			<th colspan="5"><button id="butn">确认提交</button></th>
		</tr>
		</tfoot>
	</table>
</s:form>



上面注释还算清楚,下面就没必要说明了。主要就是
id='<s:property value="moduleId"/>'

注:模块选择是有另一个直接用jQuery tree + checkbox plug in选择的实现方法,上面这个不过是另一个小需求,有空再记录那个。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics