用过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选择的实现方法,上面这个不过是另一个小需求,有空再记录那个。
分享到:
相关推荐
Jquery全选反选Checkbox 简单好用 复用性很好 欢迎下载
jquery checkbox 选中 取消 checkbox多选
JQuery实现checkbox的全选取消全选
C#.net下通jQuery实现的由CheckBox来控件CheckBoxList的全选操作,通过CheckBox来全选CheckBoxList,当有一个CheckBoxList选中时,CheckBox则被选中,且并且可以取得选中的CheckBox和CheckBoxList的value和text
自动动手写了个操作checkbox,里面包括全选、全不选、反选、获取选中值四个功能...
jQuery_treetable实现checkbox树,实现多级联动,适用于权限树等各类需要树形结构数据的场景
昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个
本文实例讲述了jQuery实现checkbox全选的方法。分享给大家供大家参考。具体分析如下: 通过checkbox 进行全选和取消全选的操作,如果通过toggle进行处理,则会出现checkbox无法显示对勾的问题。 使用click事件,根据...
jQuery制作全选CheckBox 的两种代码 还不错
jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框
jquery实现checkbox全选、反选、全部选,很不错的资源,欢迎大家下载学习var langType=""; var arLangType = []; $("[name='langType'][checked]").each(function(i) { arLangType[i]=$(this).val(); }); ...
jquery-ui-multiselect实现多选下拉框的效果,支持下拉多选的一个小demo
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
基于jQuery的Checkbox精美样式插件 .
jquery动态生成checkbox 设置一行最多显示几个checkbox 获取checkbox选中项
页面上通过一个checkbox实现全选与反选
主要介绍了jQuery实现自定义checkbox和radio样式的相关资料,需要的朋友可以参考下
jquery 树形 checkbox jQuery(document).ready(function(){ jQuery(".mytree").checkboxTree({ collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif", expandedarrow: "images/checkboxtree/img-...
jQuery实现复选框checkbox的全选与反选功能,不用多介绍了吧,以往都是基于纯js的实现比较多,这个是引入了jquery,或许更能满足现在的前端设计吧。
在jquery 下实显checked 联动 当input checkbox选中时自动判断上级下级并选中