JQuery的TreeView使用以及稍复杂的复选框控制

最新推荐文章于 2019-11-12 11:13:36 发布

uestc_lxp

最新推荐文章于 2019-11-12 11:13:36 发布

阅读量953

点赞数

文章标签： jquery treeview 源码 checkbox label

本文链接：https://blog.csdn.net/uestc_lxp/article/details/40110499

版权

JQuery的threeview工具很好用，用来实现树状结构，其下载链接为：https://github.com/jzaefferer/jquery-treeview，将下面的程序放在源码包的demo文件夹下运行即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=gbk"/>
	<title>jQuery treeview</title>
	<link rel="stylesheet" href="../jquery.treeview.css" />
	<script src="../lib/jquery.js" type="text/javascript"></script>
	<script src="../jquery.treeview.js" type="text/javascript"></script>
	<script type="text/javascript">
//当选中子类的任何一个上级选中，当所有的子类都没选中时，父类也不选中，当选中父类时，相应的子类都选中
          $(function(){
		//给所有权限复选框添加事件
		$("[type=checkbox]").click(function() {
			//自己选中或者取消时，把所有的下级权限也同时选中或取消
			$(this).siblings("ul").find("input").attr("checked",this.checked);
			//当选中下面的一个时，上级也同时会选中
			if(this.checked) {
				$(this).parents("li").children("input").attr("checked",true);
			} 
			//当取消一个时，同级咩有选中的权限了，就取消它的上级，再向上如此
			else {
					if($(this).parent().siblings("li").children("input:checked").size()==0) {
						$(this).parent().parent().siblings("input").attr("checked",false);
						var start = $(this).parent().parent().siblings();;
						if(start.parent().siblings("li").children("input:checked").size()==0) {
							start.parent().parent().siblings("input").attr("checked",false);
						} 
					} 					
			}
		});
	});
	</script>
	</head>
	<body>
		<ul id="browser" class="filetree ">
			<li>
				<input type="checkbox" id="ch1" style="float:left"/>
				<span class="folder" style="margin-left:20px;"><label for="ch1">系统管理</label></span>		
				<ul>
					<li>
						<input type="checkbox" id="ch2" style="float:left"/>
						<span class="folder" style="margin-left:20px;"><label for="ch2">岗位管理</label></span>						
						<ul id="folder21">
							<li>
								<input type="checkbox" id="ch3" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch3">岗位列表</label></span>
							</li>
							
							<li>
								<input type="checkbox" id="ch4" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch4">岗位删除</label></span>		
							</li>
							
							<li>
								<input type="checkbox" id="ch5" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch5">岗位添加</label></span>		
							</li>
													
						</ul>
					</li>
					<li>
						<input type="checkbox" id="ch6" style="float:left"/>
						<span class="folder" style="margin-left:20px;"><label for="ch6">部门管理</label></span>		
						<ul id="folder21">
							<li>
								<input type="checkbox" id="ch7" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch7">部门列表</label></span>		
							</li>
							
							<li>
								<input type="checkbox" id="ch8" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch8">部门删除</label></span>		
							</li>						
							<li>
								<input type="checkbox" id="ch9" style="float:left"/>
								<span class="folder" style="margin-left:20px;"><label for="ch9">部门添加</label></span>		
							</li>												
						</ul>
					</li>				
				</ul>
			</li>
		</ul>
//使用treeview实现树状结构的展开和隐藏
                        <script type="text/javascript">
			$(function(){
				$("#browser").treeview();
			});
		</script>
	</body>
</html>

其运行效果图为：