TreeView树状结构

  做OA系统,权限控制部分用到了树状结构,通过勾选来为不同的用户分配权限。


  

  通过点击“+”对树展开或者折叠,我们这里使用了封装好的jquery.treeview.js来实现树状结构的功能;


主体代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	
	<!-- 1.导入css,js-->
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.treeview.js"></script>
	<link rel ="stylesheet" type="text/css" href="jquery.treeview.css">
</head>

<body>

	<!-- 2,使用ul展示数据-->
	<ul id="tree">
		<li>系统管理
			<ul>
				<li>部门管理</li>
				<li><div οnclick="$(this).next().toggle()" >岗位管理</div>
					<ul>
						<li>岗位添加</li>
						<li>岗位删除</li>
					</ul>
				</li>
				<li><input type="checkbox"></input>用户管理</li>
			</ul>		
		</li>
		<li>审批流转</li>
	</ul>

	<!--3.显示为树状结构-->
	<script type="text/javascript">
	<!--当文档加载完之后,再执行-->
	$("#tree").treeview();
	</script>
</body

</html>

整个过程分为3部:

1.导入jquery.js 和 jquery.treeview.js以及相应的css样式文件

2.使用<ul> 和 <li>标签展示数据

3.当文档加载完之后,执行treeview()方法;


测试的文件结构图

  

  

  οnclick="$(this).next().toggle()":表示鼠标点击时,功能进行展开和折叠;


  完成


  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 19
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值