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

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>


其运行效果图为:





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值