最近在学jsp，期末了要做项目，需要用到树状目录，百度了很多，都没有找到想要的答案，最后自己折腾了半天，才搞定。

下面我就来分享一下怎么实现一个简单的树状目录：

1. 下载jquery-treeview插件：github 百度云

2. 解压刚才下载的压缩包，并将images文件夹的中gif复制到项目中的图片管理文件夹中，如下图：



当然复制到什么地方是你自己选择

3. 然后将jquery.treeview.css复制到你项目的css管理文件中：



可选：复制demo/screen.css到项目中

4. 复制jquery.treeview.js到项目中的js管理文件夹中：



可选：复制demo/jquery.cookie.js到项目中

5. 修改jquery.treeview.css中图片的路径（一样的就可以不修改了）：



步骤4中的img是你图片所在的文件夹

6.在head标签中添加连接：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

	<link rel="stylesheet" href="css/jquery.treeview.css" type="text/css"/>

	<!--screen.css不要也可以-->

	<link rel="stylesheet" href="css/screen.css" type="text/css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

	<!--jquery.cookie.js不要也可以-->

	<script src="js/jquery.cookie.js"></script>

	<script src="js/jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

	$(document).ready(function(){

		$("#treeview").treeview({

			toggle: function() {

				console.log("%s was toggled.", $(this).find(">span").text());

			}

		});

	});

</script>

</head>

7.写一点代码来测试下：

<div id="main">

<ul id="treeview" class="filetree">

  	<li><span class="folder">密码修改</span>

    	<ul>

      	<li><span class="file">密码修改</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">系统管理</span>

    	<ul>

      	<li><span class="file">系统管理</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">行政部门</span>

    	<ul>

    		<li><span class="file">合同管理</span></li>

    		<li><span class="file">加班信息</span></li>

    		<li><span class="file">业绩报告</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">考勤部门</span>

  		<ul>

  			<li><span class="file">考勤信息</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">人力资源部</span>

  		<ul>

  			<li><span class="file">添加员工</span></li>

  			<li><span class="file">删除员工</span></li>

  			<li><span class="file">信息跟踪</span></li>

  			<li><span class="file">修改员工信息</span></li>

  			<li><span class="file">员工信息查询</span></li>

  			<li><span class="file">合同过期查询</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">请假管理</span>

  		<ul>

  			<li><span class="file">请假审批</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">招聘管理</span>

  		<ul id="tree">

  			<li><span class="folder">求职者信息管理</span>

  				<ul>

  					<li><span class="file">添加</span></li>

  					<li><span class="file">查询</span></li>

  				</ul>

  			</li>

  			<li><span class="file">添加招聘信息</span></li>

  			<li><span class="file">修改招聘信息</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">财务部门</span>

  		<ul>

  			<li><span class="file">密码修改</span></li>

  			<li><span class="file">薪资管理</span></li>

  			<li><span class="file">加班信息</span></li>

  			<li><span class="file">考勤信息</span></li>

  			<li><span class="file">业绩报告</span></li>

  			<li><span class="file">固定薪资</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">培训管理</span>

  		<ul>

  			<li><span class="file">添加培训</span></li>

  			<li><span class="file">修改培训信息</span></li>

  		</ul>

  	</li>

</ul>

</div>

8.运行效果：

html结合js实现简单的树状目录的更多相关文章

  1. Linux 目录详解 树状目录结构图

    1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...

  2. python os.walk处理树状目录结构的文件

    在项目工作中,时常需要用到处理文件的方法,尤其是在windows环境下的树状目录结构 os.walk恰好能完美的处理这种树状目录结构文件,能高效地帮助我们得到我们需要处理的文件 目录结构: Deskt ...

  3. HDU 2836 Traversal 简单DP + 树状数组

    题意:给你一个序列,问相邻两数高度差绝对值小于等于H的子序列有多少个. dp[i]表示以i为结尾的子序列有多少,易知状态转移方程为:dp[i] = sum( dp[j] ) + 1;( abs( he ...

  4. 洛谷 P5057 [CQOI2006]简单题 (树状数组,位运算)

    题意:有一个长度为\(n\)的数组,进行\(m\)次操作,每次读入一个值\(t\),如果\(t=1\),则将区间\([l,r]\)的数字反转,若\(t=2\),则查询下标为\(i\)的值. 题解:树状 ...

  5. tree - 列出树状目录结构

    tree - list contents of directories in a tree-like format. 树状显示目录结构 常用格式: tree [option] [directory] ...

  6. js list数据 转 树状 层级 JSON，递归生成树状 层级 JSON

    <!DOCTYPE html> <html> <head> <script> var data=[ {"id":"aaa& ...

  7. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  8. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  9. 51nod1019逆序数(归并排序/树状数组)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1019 题意:中文题诶- 思路: 方法1:归并排序- 归并排序过 ...

随机推荐

  1. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  2. Protege5.0.0入门学习

    OWL本体的重要组成部分 Individuals:个体,代表一个领域里面的对象.可以理解成一个类的实例(instances of classes). Properties:属性,是两个个体之间的双重联 ...

  3. Asp.net mvc 知多少（九）

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

  4. 初探Lambda表达式/Java多核编程【4】Lambda变量捕获

    这周开学,上了两天感觉课好多,学校现在还停水,宿舍网络也还没通,简直爆炸,感觉能静下心看书的时间越来越少了...寒假还有些看过书之后的存货,现在写一点发出来.加上假期两个月左右都过去了书才看了1/7都 ...

  5. ci 框架发送邮箱

    定义数据 $config = array(    'protocol' =>'smtp',    'smtp_host'=>'ssl://smtp.163.com',    'smtp_u ...

  6. observe.js 源码 学习笔记

    /** * observejs --- By dnt http://kmdjs.github.io/ * Github: https://github.com/kmdjs/observejs * MI ...

  7. 008 Java集合浅析3

    在前面的几节里,本教程从整体架构上去把握了JDK中的集合框架,并简单分析了其中Collection组的顶级接口,知道Collection接口的常见直接子接口有List.Set和Queue,并就这三个子 ...

  8. 百度地图JavascriptApi Marker平滑移动及车头指向行径方向

    相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳&q ...

  9. 关于mvc中传入DataTable到视图的应用

    MVC 中 如果是多表连接查询出的数据需要重新定义一个ViewModel,觉得很是麻烦,所以可以通过传一个DataTable到视图中可以避免这个问题 但是不知道会有什么不好的地方,有这方面经验的大神有 ...

  10. ubuntu 笔记

    Ubuntu学习之路还很长,做个笔记也不亏 terminal tab 补全忽略大小写: 在 /ect/inputrc文件中添加或修改 'set completion-ignore-case on' U ...