<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试在多级checkbox环境下选中与去除选中的级联控制</title>
</head>
<body>
<form name="MultiMenuFuncs">
<input type="checkbox" name="allSelect" onclick="selectAll(this)">全选<br/>
<input type="checkbox" name="001" onclick="All(this)">系统管理<br/>
<input type="hidden" name="checkRightFunc" value="001">
<input type='checkbox' name='001-002' onclick="All(this)">用户管理
<input type="hidden" name="checkRightFunc" value="001-002">
<input type="checkbox" name="001-002-001/" onclick="All(this)">创建用户
<input type="hidden" name="checkRightFunc" value="001-002-001/" >
<input type='checkbox' name="001-002-002/" onclick="All(this)">删除用户
<input type="hidden" name="checkRightFunc" value="001-002-002/" >
<input type='checkbox' name="001-002-003/" onclick="All(this)">修改用户
<input type="hidden" name="checkRightFunc" value="001-002-003/" >
<br/>
<input type='checkbox' name='001-003' onclick="All(this)">角色管理
<input type="hidden" name="checkRightFunc" value="001-003">
<input type='checkbox' name="001-003-001/" onclick="All(this)">创建角色
<input type="hidden" name="checkRightFunc" value="001-003-001/">
<input type='checkbox' name="001-003-002/" onclick="All(this)">删除角色
<input type="hidden" name="checkRightFunc" value="001-003-002/" >
<input type='checkbox' name="001-003-003/" onclick="All(this)">修改角色
<input type="hidden" name="checkRightFunc" value="001-003-003/">
<br/>
<input type='checkbox' name='001-004' onclick="All(this)">数据字典管理
<input type="hidden" name="checkRightFunc" value="001-004">
<br/>
<input type="button" name="确定" value="确定" onclick="sendChecked()"/>
<input type="reset" name="复位" value="重置">
</form>
</body>
</html>
<script language="JavaScript">
//检查处理未选中的checkbox,将对应hidden同步标识为"",注意脚本语言不支持同名的元素以数组形式获得。
function sendChecked()
{
var allElements=document.MultiMenuFuncs.elements;
for (i=0; i<allElements.length; i++)
{
if (allElements[i].type == "hidden")
{
var eachcheck=document.getElementById(allElements[i].value);
if (eachcheck.type=="checkbox" && eachcheck.checked==false)
allElements[i].value="";
}
}
for (i=0; i<allElements.length; i++)
alert("name是"+allElements[i].name+",value是"+allElements[i].value);
var reset=document.getElementById("复位");
//复位
reset.click();
}
//处理所有checkbox为与自身相同的状态。
function selectAll(e)
{
var f=document.MultiMenuFuncs;
for(i=0;i<f.elements.length;i++)
f.elements[i].checked=e.checked;
}
//先遍历处理自己的子孙checkbox,再调用Item函数递归处理当前节点e的所有祖先checkbox,即先往下,再往上。
function All(e)
{
var f=document.MultiMenuFuncs;
var namestr=e.name;
var g=namestr.length;
//遍历表单上所有element,取当前节点的前缀来匹配其所有子孙checkbox,根据当前节点的选中与否状态改变所有子孙的checkbox状态。
for(i=0;i<f.elements.length;i++)
{
var each1=f.elements[i];
if(each1.name.substr(0,g)==namestr && each1.type=="checkbox")
each1.checked=e.checked;
}
//调用Item,它会判断当前节点的状态,根据选中还是不选中递归处理其父亲和所有祖先节点
Item(e);
var flag="true";
for(i=0;i<f.elements.length;i++)
{
var each2=f.elements[i];
if(each2.name=="allSelect") continue;
if(each2.type=="checkbox" && each2.checked==false)
flag="false";
}
if(flag=="true")
document.getElementById("allSelect").checked=true;
else document.getElementById("allSelect").checked=false;
}
//Item要使用到的一个附加函数,用于对不选中某节点的处理。
function Item2(e)
{
var f=document.MultiMenuFuncs;
var namestr=e.name;
var g=namestr.length;
//控制变量,用于标识当前节点的所有直接儿子节点是否均为不选中状态,初始为true。
var changed=true;
// alert("当前父节点为 "+namestr);
for(i=0;i<f.elements.length;i++)
{
var each=f.elements[i];
var tempstr=(each.name).substr(0,g);
var ltemp=each.name.length;
/*判断是否是直接儿子节点,这里注意到有两种情况,即末尾为"/"且长度相差5,或者是相差为4(非最后一级功能点而言),
但首先要符合取最长前缀相等的条件。*/
if(tempstr==namestr&&((ltemp-namestr.length==4)||(each.name.substr(ltemp-1,1)=="/"&<emp-namestr.length==5)))
{
// alert("符合条件是"+namestr+"的儿子节点的有:"+each.name);
//只要有一个儿子的状态为选中,那么就将changed改为false。
if (each.checked==true)
changed=false;
}
}
//判断当前节点的直接儿子是不是都没选中状态,如果是,就把当前节点设置为未选中,为此还需要回到它的父亲继续
//根据叔叔伯伯们的状态来修改它父亲的状态,也就是需要递归。
//这里直接借用Item而不使用Item2来遍历是因为Item本身就具有判定当前状态和追踪父亲的能力,而且递归出口也
//与假设Item2改成可递归的出口相同,为此简化代码。
if (changed==true)
{
e.checked=false;
//Item2("e的父亲");
Item(e);
}
}
//由下往上找选中的checkbox的所有祖先,如果当前是未选中,转Item2它的父节点处理
function Item(e)
{
var namestr=e.name;
var i=namestr.lastIndexOf("-");
var j=namestr.length;
var nextstr=namestr.substring(0,i);
//递归出口,判断当前节点有没有父亲checkbox节点
if (i!=-1)
{
//这是js中通过表单变量的name来获得访问该变量的方法,另一种方法是通过下标,不常用下标这种方法因下标是系统按提交顺序安排。
var t=document.getElementById(nextstr);
//注意下面注释的写法是错误的
// var f=document.MultiMenuFuncs;
// var t=f.getElementById(nextstr);
//alert("i="+i);
//如果当前是选中的动作,立刻选中其直接父亲checkbox,并递归向上选中所有祖先checkbox。
if (e.checked==true)
{
t.checked=true;
Item(t);
}
//如果当前节点e是取消选中,那么需要判断和它平级的所有兄弟们的状态,为此回到它的父亲t进行遍历查询兄弟们的选中与否状态。
else Item2(t);
}
}
//注意到hidden字段的妙用了,在hidden的value中带/结尾的表示是功能点,否则为无功能点的上级权限节点。
//本静态文档用于测试算法,动态的jsp展现页面见另一个jsp文件,饱含了本算法中的script部分。
//刘鹏远 2006年8月22日软通动力完成。
//本版本修改部分,考虑功能点节点的hidden标识有所不同,不然在保存选中的时候会有二义性。
</script>
没有合适的资源?快使用搜索试试~ 我知道了~
RoleBased_Privilege_Control_Static_Test.rar_Action!_struts check
共1个文件
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 8 浏览量
2022-09-22
19:05:26
上传
评论
收藏 3KB RAR 举报
温馨提示
自己写了一个角色权限控制的框架,仅仅使用了DOM在html的view层,以及JSP、Struts展现标记在前端控制层,Action多组类在后端控制层,两个biz类在模型层。本上载部分为第一部分,验证了一组递归算法实现checkbox的1种状态变化。
资源推荐
资源详情
资源评论
收起资源包目录
RoleBased_Privilege_Control_Static_Test.rar (1个子文件)
RoleBased_Privilege_Control_Static_Test.html 6KB
共 1 条
- 1
资源评论
weixin_42653672
- 粉丝: 0
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功