最近在学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. 理解WEB API网关

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  2. Mac入门推荐（写给Mac小白）

    本人第一次接触Mac是在2016年10月中旬,那时由于对苹果系统的不熟悉,导致自己一开始的时候用的很不习惯,甚至还想换回Windows系统.总所周知,苹果系统的软件比较少,在此我向大家推荐一些个人觉得 ...

  3. angular : ng-animate : css 原理，详解

    通过几中指令就能完成1.2.xx的animate ·ng-repeat ·ng-show,ng-hide ·ng-if,ng-include,ng-view ·ng-switch ·ng-class ...

  4. 读书笔记 effective c++ Item 26 尽量推迟变量的定义

    1. 定义变量会引发构造和析构开销 每当你定义一种类型的变量时:当控制流到达变量的定义点时,你引入了调用构造函数的开销,当离开变量的作用域之后,你引入了调用析构函数的开销.对未使用到的变量同样会产生开 ...

  5. java 线程及synchronized关键字

         从本篇开始,我们将会逐渐总结关于java并发这一块的内容,也可以理解为是我的笔记,主要来自于一些博客和java书籍中的内容,所有的内容都是来自于他们之中并且加上了我自己的理解和认识.     ...

  6. github学习（二）

    Git学习(一) 学习github一定要学会git,否则在后续的github运用中会出现很多问题. 1.安装Git: Mac自带Git,Windows需要自己安装. 2.配置git: 配置user.n ...

  7. Bat再次小试

    继<Bat小试牛刀>之后,今天又需要一个小的bat文件.需求是这样的,有一个windows服务(服务名:xxxx,进程映像名:xxxx.exe)被数据库拖慢了,但目前又没时间调整代码,所以 ...

  8. swiper入门之快速实现轮播--手机端

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. JSP中列表展示,隔行变色以及S标签的使用

    1.java代码 /** * 列表展示,隔行变色以及S标签的使用 * * @return */ public String list() { List<User> list = new A ...

  10. 一份关于组建.NET Core开源团队的倡议书

    组建这个.NET Core开源团队,旨在为社区出一份力,对自己能力也是一个提升,是一个即利于他人,也利于自己的想法和行动.如果你有很多想法,如果你需要认识更多志同道合的朋友,如果你想展示自己的才华,如 ...