您的位置：首页 > Web前端 > JQuery

jquery Treeview插件的使用及复选框的级联

2016-09-01 15:41 447 查看
　　本文是对jquery的Treeview插件使用的实例介绍

　　效果图如下：

　　

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配置权限</title>
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery_treeview/jquery.treeview.js"></script>
<link type="text/css" rel="stylesheet" href="jquery_treeview/jquery.treeview.css" />

<style>
span.folder{
background-image: url("jquery_treeview/images/folder.gif");
background-repeat: no-repeat;
font-size: 14px;
padding-left: 20px;
height: 17px;
}

/*ul li{
list-style: none;
}*/
</style>

<script type="text/javascript">

$(function(){

$("[name=chkbox]").click(function(){

//当选中或取消一个权限时，也同时选中或取消所有的下级权限
$(this).siblings("ul").find("input").attr("checked",this.checked);

//当选中一个权限时，也要选中所有的直接上级权限
if(this.checked ==true){
$(this).parents("li").children("input").attr("checked",true);
}

//当某一个父权限下的子权限都不选中时，该父权限也不选中
var elements=$(this).parent("li").parent("ul").find("input");
var num=elements.length;
/*alert(num);*/
var a=0;
for(var i=0;i<num;i++){
if(elements[i].checked==false){
a++;
}
}
if(a==num){
$(this).parent("li").parent("ul").siblings("input").attr("checked",false);
}

});
});
</script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
<div id="Title_bar_Head">
<div id="Title_Head"></div>
<div id="Title"><!--页面标题-->
<input type="checkbox" id="chkAll" onclick="$('[name=chkbox]').attr('checked',this.checked)">
<label for="chkAll">全选</label>
配置权限
</div>
<div id="Title_End"></div>
</div>
</div>

<!--显示表单内容-->
<div id=MainArea>

<ul id="tree">
<li>
<input type="checkbox" id="cb0" name="chkbox">
<label for="cb0"><span class="folder">系统管理</span></label>
<ul>
<li>
<input type="checkbox" id="cb1" name="chkbox">
<label for="cb1"><span class="folder">用户管理</span></label>
<ul>
<li><input type="checkbox" id="cb11" name="chkbox">
<label for="cb11"><span class="folder">用户列表</span></label></li>
<li><input type="checkbox" id="cb12" name="chkbox">
<label for="cb12"><span class="folder">新增用户</span></label></li>
<li><input type="checkbox" id="cb13" name="chkbox">
<label for="cb13"><span class="folder">修改用户</span></label></li>
<li><input type="checkbox" id="cb14" name="chkbox">
<label for="cb14"><span class="folder">删除用户</span></label></li>
</ul>
</li>
<li>
<input type="checkbox" id="cb2" name="chkbox">
<label for="cb2"><span class="folder">部门管理</span></label>
<ul>
<li><input type="checkbox" id="cb21" name="chkbox">
<label for="cb21"><span class="folder">部门列表</span></label></li>
<li><input type="checkbox" id="cb22" name="chkbox">
<label for="cb22"><span class="folder">新增部门</span></label></li>
<li><input type="checkbox" id="cb23" name="chkbox">
<label for="cb23"><span class="folder">修改部门</span></label></li>
<li><input type="checkbox" id="cb24" name="chkbox">
<label for="cb24"><span class="folder">删除部门</span></label></li>
</ul>
</li>
<li>
<input type="checkbox" id="cb3" name="chkbox">
<label for="cb3"><span class="folder">岗位管理</span></label>
<ul>
<li><input type="checkbox" id="cb31" name="chkbox">
<label for="cb31"><span class="folder">岗位列表</span></label></li>
<li><input type="checkbox" id="cb32" name="chkbox">
<label for="cb32"><span class="folder">新增岗位</span></label></li>
<li><input type="checkbox" id="cb33" name="chkbox">
<label for="cb33"><span class="folder">修改岗位</span></label></li>
<li><input type="checkbox" id="cb34" name="chkbox">
<label for="cb34"><span class="folder">删除岗位</span></label></li>
</ul>
</li>
<li>
<input type="checkbox" id="cb4" name="chkbox">
<label for="cb4"><span class="folder">审批流转</span></label>
<ul>
<li><input type="checkbox" id="cb41" name="chkbox">
<label for="cb41"><span class="folder">审批</span></label></li>
</ul>
</li>
</ul>
</li>

</ul>

</div>

<script language="javascript">
$("#tree").treeview();
</script>

<div class="Description">
说明：<br />
1，选中一个权限时：<br />
     a，应该选中他的所有直系上级。<br />
     b，应该选中他的所有直系下级。<br />
2，取消选择一个权限时：<br />
     a，应该取消选择他的所有直系下级。<br />
     b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并向上做这个操作。<br />

3，全选/取消全选。<br />
4，默认选中当前岗位已有的权限。<br />
</div>

</body>
</html>


View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航